CSS常用选择器：
一、简单选择器
*，通用元素选择器，匹配任何元素
E，标签选择器，匹配所有使用E标签的元素
.class，class选择器，匹配特定class属性的元素
/#ID，id选择器，匹配特定id属性的元素
二、属性选择器
[atrr] ，选择包含 attr 属性的所有元素，不论 attr 的值为何
[attr=val] ，仅选择 attr 属性被赋值为 val 的所有元素
三、组合选择器
A, B ，多元素选择器：选中匹配 A 或B 元素
A B ，后代选择器：选中匹配 A 元素的后代B 元素(A B之间空格分开)
A > B，子元素选择器：选中匹配 A父元素内的直接B子元素
A + B，直接相邻选择器：选中匹配 B 元素之后的相邻的同级的A元素
A ~ B，普通相邻选择器：选中B元素之后的同级 A 元素（无论直接相邻与否）
.a.b,匹配class=''a b"元素
A.b,匹配class="a"的元素
四、伪类选择器
伪类与伪元素的区别:
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
1、动态伪类选择器：
a:link ，匹配所有未被点击的链接
a:visited ，匹配所有已被点击的链接
a:hover ，匹配鼠标悬停其上的a元素
a:active ，匹配鼠标已经其上按下、还没有释放的a元素
E :focus ,选择获取焦点的输入字段
2：UI元素伪类选择器：
E:checked ： {attribute}，匹配所有用户界面（form表单）中处于选中状态的元素E
E:enabled ： {attribute}，匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled ： {attribute}，匹配所有用户界面（form表单）中处于不可用状态的E元素
E::selection ： {attribute}，匹配E元素中被用户选中或处于高亮状态的部分
3：结构伪类选择器：
:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。“:root”选择器等同于<html>元素
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素
: last-child匹配元素的最后一个子元素。
:nth-child根据元素的位置匹配一个或者多个元素
（它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
1n+0，或n，匹配每一个子元素。
2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
3n+4匹配位置为4、7、10、13…的子元素。）
:nth-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素
：first-of-type匹配属于其父元素的首个特定类型的子元素的元素。
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。
五、伪元素选择器
伪元素概念：
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
E::before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。
E::after在被元素后插入内容，其用法和特性与:before相似
E::first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。
E:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
E::selection匹配用户被用户选中或者处于高亮状态的部分。
E::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
计算选择器的优先级
简单情况：
优先级从高到低分别是：
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
Id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
复杂场景：
如有多种选择器组合使用，同时选中某元素，直接计算a,b,c,d的值
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
abcd优先级依次降低
范例
<style>
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
-
.box:first-child {
color: red;
}
选择其父元素的第一个class=".box"的子元素为红色，选中的是 <div class="box">div.box</div>并让其字体颜色为红色 -
.box:first-of-type {
background: blue;
}
选择其父元素中指定的某种类型且class=".box"的子元素的背景颜色为蓝色，选中的是 <div class="box">div.box</div>，<p class="box">p.box</p>，并让其背景颜色为蓝色 -
.box :first-child {
font-size: 30px;
}
选择class="box"父元素内的第一个子元素的字体为30px,选中的是 <div class="item">div.item</div>，并让其字体大小为30px; -
.box :first-of-type {
font-weight: bold;
}
选择claa="box"父元素内的第一个某种类型的子元素的字体加粗，选中的是 <div class="item">div.item</div>
<p class="item">p.item</p>，并让其字体加粗
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论