元素选择器
标签选择器
标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。
-
优点：使用简单，直接引用，不需要为标签添加属性。
-
缺点：匹配的范围过大，精度不够。
-
一般常用标签选择器重置各个标签的默认样式。
p{
font-size:12px;
color:red;
}
类选择器
类选择器以点号（.）为前缀，后面是一个类名。
在标签中定义class属性后，设置属性值为类选择器的名称。
<style>
.red{
color:red;
}
</style>
<body>
<p class="red">
aaaaa
</p>
</body>
ID选择器
ID选择器以井号（#）为前缀，后面是一个ID名。
在标签中定义id属性后，设置属性值为ID选择器的名称。
<style>
#red{
color:red;
}
</style>
<body>
<p id="red">
aaaaa
</p>
</body>
通配选择器
通配选择器使用星号（*）表示，用来匹配文档中的所有标签。
关系选择器
包含选择器
包含选择器通过空格连接两个简单的选择器，前面选择器表示包含的对象，后面选择器表示被包含的对象。
- 优点：可以缩小匹配范围。
- 缺点：匹配范围相对较大，影响的层级不受限制。
<style>
#red p{
color:red;
}
</style>
<body>
<div class="red">
<p>aaaaa </p>
</div>
</body>
子选择器
子选择器使用尖角号（>）连接两个简单的选择器，前面选择器表示包含的父对象，后面选择器表示被包含的子对象。
- 优点：相对包含选择器，匹配的范围更小，从层级结构上看，匹配目标更明确。
- 缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构。
<style>
div>p{
color:red;
}
</style>
<body>
<div>
<p>aaaaa </p>
</div>
<div>
<p>aaaaa </p>
</div>
</body>
分组选择器
分组选择器使用逗号（,）连接两个简单的选择器，前面选择器匹配的元素与后面选择器匹配的元素混合在一起作为分组选择器的结果集。
属性选择器
属性选择器是根据标签的属性来匹配元素，使用中括号进行标识：[属性表达式]
- E[attr]选择具有attr属性的E元素。
- E[attr=“value”]选择具有attr属性，且属性值等于value的E元素。
- E[attr~=“value”]选择具有attr属性，且属性值为用空格分隔的字词列表，其中一个等于value的E元素。包含有一个值，且该值等于val的情况。
- E[attr^=“value”]选择具有attr属性，且属性值为以value开头的字符串的E元素。
- E[attr$=“value”]选择具有attr属性，且属性值为以value结尾的字符串的E元素。
- E[attr*=“value”]选择具有attr属性，且属性值为包含value的字符串的E元素。
- E[attr|=“value”]选择具有attr属性，其值是以value开头，并用连接符"-"分隔的字符串的E元素；如果值仅为value，也将被选择。
a
attr即为其属性，例如id=“aaaa”,attr即为id
伪选择器
伪选择器包括伪类选择器和伪对象选择器。
伪选择器能够根据元素或对象的特征、状态、行为进行匹配。
伪选择器以冒号（:）作为前缀标识符。
冒号前可以添加限定选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。
[菜鸟窝,伪选择器][https://www.runoob.com/cssref/css-selectors.html]
结构伪类
结构伪类是根据文档结构的相互关系来匹配特定的元素，从而减少文档元素的class属性和ID属性的无序设置，使得文档更加简洁。
- :fist-child：第一个子元素。
- :last-child：最后一个子元素。
- :nth-child()：按正序匹配特定子元素。
- :nth-last-child()：按倒序匹配特定子元素。
- :nth-of-type()：在同类型中匹配特定子元素。
- :nth-last-of-type()：按倒序在同类型中匹配特定子元素。
- :first-of-type：第一个同类型子元素。
- :last-of-type：最后一个同类型子元素。
- :only-child：唯一子元素。
- :only-of-type：同类型的唯一子元素。
- :empty：空元素。
