标签选择器：标签名{}，选择页面上所有该标签的元素
类选择器：.类名{} ，选择所有class属性一致的标签，可以跨标签
id选择器：#id名{}，全局唯一
优先级顺序：id选择器>类选择器>标签选择器
样例代码，p1p4与p9p10为body的第一代后代，ul li中的p5~p8为第二代后代
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<li>
<p>p7</p>
</li>
<li>
<p>p8</p>
</li>
</ul>
<p>p9</p>
<p>p10</p>
</body>
body p{
background : red;
}
body>p{
background : green;
}
.active+p{
background : blue;
}
.active~p{
background : yellow;
}
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>p5</li>
<li>p6</li>
<li>p7</li>
<li>p8</li>
</ul>
<p>p9</p>
<p>p10</p>
</body>
/*选中元素的父级的第一个子元素*/
ul li:first-child{
background: red;
}
/*选中元素的父级的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中元素的父级的所有子元素中的第n个，并且类型要与该选中元素同类才会被选中，否则无效*/
p:nth-child(1){ /*表示了h1，类型不符，不会选中，即无效*/
background: blue;
}
p:nth-child(2){ /*表示了p1，类型相符，选中*/
background: orange;
}
.list:nth-child(3){ /*表示了p7，类型相符，选中*/
background: yellow;
}
/*选中元素的父级的所有该类子元素中的第n个*/
p:nth-of-type(2){ /*注意和上面对比*/
background: aqua;
}
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item">2</a>
<a href="imgaes/123.jpg" class="links item">3</a>
<a href="imgaes/123.pdf" class="links">4</a>
<a href="images/123.png" class="links">5</a>
<a href="/123.jpg" class="links item">6</a>
<a href="/123.doc" class="links item">7</a>
<a href="123.pdf" class="links">8</a>
<a href="ab.doc" class="links">9</a>
<a href="cd.png" class="links item last" id="last">10</a>
</p>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: deepskyblue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
line-height: 50px;
}
/*存在id属性的a元素*/
a[id]{
background: orange;
}
/*还可以在属性后限定属性值*/
a[id=first]{
background: green;
}
/*包含*/
a[class~="item"]{ /* ~= 或 *= 代表包含，即class属性中包含item的元素被选中*/
background: red;
}
/*^=以什么开头*/
a[href^=https]{
background: green;
}
/*&=以什么结尾*/
a[href$=pdf]{
background: blue;
}
原文：https://www.cnblogs.com/zzzstudy/p/14622235.html