选择器
约 2961 字大约 10 分钟
2021-04-23
选择器优先级
- !important(10000) > 行内样式(1000) > #id(100) > .class(10) > 标签(1) > * > 继承 > 默认
- 选择器从右往左解析
- 考虑到就近原则，同权重情况下样式定义以最近者为准
- 载入的样式按照最后的定位为准
css哪些属性可以继承？
可继承的样式属性： font-size, font-family, color, ul, li, dl, dd, dt;
不可继承的样式属性： border, padding, margin, width, height；
css选择器有哪些
| 选择器 | 说明 |
|---|---|
| 通配符选择器（*） | 选择所有元素，不参与计算优先级，兼容性 |
| id 选择器（#X ） | 选择 id 值为 X 的元素 |
| 类选择器（.X） | 选择 class 包含 X 的元素 |
| 后代选择器（X Y） | 选择满足 X 选择器的后代节点中满足 Y 选择器的元素 |
| 元素选择器（X） | 选择标所有签为 X 的元素 |
| 直接兄弟选择器（X + Y） | 在X 之后第一个兄弟节点中选择满足 Y 选择器的元素 |
| 子选择器（X > Y） | 选择 X 的子元素中满足 Y 选择器的元素 |
| 兄弟选择器（X ~ Y） | 选择X 之后所有兄弟节点中满足 Y 选择器的元素 |
| [attr]： | 选择所有设置了 attr 属性的元素 |
| [attr=value] | 选择属性值刚好为 value 的元素 |
| [attr~=value] | 选择属性值为空白符分隔，其中一个的值刚好是 value 的元素 |
| [attr | =value] |
| [attr^=value] | 选择属性值以 value 开头的元素 |
| [attr$=value] | 选择属性值以 value 结尾的元素 |
| [attr=value]* | 选择属性值中包含 value 的元素 |
| [:checked] | 选择单选框，复选框，下拉框中选中状态下的元素 |
伪元素选择器：
| 选择器 | 说明 |
|---|---|
| ::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
| ::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
| ::first-letter | 匹配元素的第一个字母。 |
| ::first-line | 匹配包含此伪元素的元素的第一行。 |
| ::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分。 |
| ::selection | 匹配文档中被选择的那部分。 |
| ::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分。 |
| ::first-letter | 伪元素，选择块元素第一行的第一个字母 |
| ::first-line | 伪元素，选择块元素的第一行 |
伪类选择器：
| 选择器 | 说明 |
|---|---|
| :active | 在鼠标激活（例如点击）元素的时候匹配 |
| :hover | 当鼠标悬浮到一个元素之上的时候匹配 |
| :link | 匹配未曾访问的链接 |
| :visited | 用户已经访问过的链接 |
| :blank | 匹配空输入值的<input>元素 |
| :checked | 匹配处于选中状态的单选或者复选框 |
| :any-link | 匹配一个链接的:link和:visited状态。 |
| :current | 匹配正在展示的元素，或者其上级元素。 |
| :default | 匹配一组相似的元素中默认的一个或者更多的UI元素。 |
| :dir | 基于其方向性（HTMLdir属性或者CSSdirection属性的值）匹配一个元素。 |
| :disabled | 匹配处于关闭状态的用户界面元素 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
| :enabled | 匹配处于开启状态的用户界面元素。 |
| :first | 匹配分页媒体的第一页。 |
| :first-child | 匹配兄弟元素中的第一个元素。 |
| :first-of-type | 匹配兄弟元素中第一个某种类型的元素。 |
| :focus | 当一个元素有焦点的时候匹配。 |
| :focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配。 |
| :focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素。 |
| :future | 匹配当前元素之后的元素。 |
| :indeterminate | 匹配未定态值的UI元素，通常为复选框。 |
| :in-range | 用一个区间匹配元素，当值处于区间之内时匹配。 |
| :invalid | 匹配诸如<input>的位于不可用状态的元素。 |
| :lang | 基于语言（HTMLlang属性的值）匹配元素。 |
| :last-child | 匹配兄弟元素中最末的那个元素。 |
| :last-of-type | 匹配兄弟元素中最后一个某种类型的元素。 |
| :left | 在分页媒体中，匹配左手边的页。 |
| :nth-child(an + b) | 伪类，选择前面有 an + b - 1 个兄弟节点的元素，其中 n >= 0 |
| :nth-last-child(an + b) | 伪类，选择后面有 an + b - 1 个兄弟节点的元素 其中 n >= 0 |
| X:nth-of-type(an+b) | 伪类，X 为选择器，解析得到元素标签，选择前面有 an + b - 1 个相同标签兄弟节点的元素 |
| X:nth-last-of-type(an+b) | 伪类，X 为选择器，解析得到元素标签，选择后面有 an+b-1 个相同标签兄弟节点的元素 |
| X:first-child | 伪类，选择满足 X 选择器的元素，且这个元素是其父节点的第一个子元素 |
| X:last-child | 伪类，选择满足 X 选择器的元素，且这个元素是其父节点的最后一个子元素 |
| X:only-child | 伪类，选择满足 X 选择器的元素，且这个元素是其父元素的唯一子元素 |
| X:only-of-type | 伪类，选择 X 选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它 |
| X:first-of-type | 伪类，选择 X 选择的元素，解析得到元素标签，如果该元素 是此此类型元素的第一个兄弟，选中它 |
| :local-link | 匹配指向和当前文档同一网站页面的链接。 |
| :is() | 匹配传入的选择器列表中的任何选择器。 |
| :not | 匹配作为值传入自身的选择器未匹配的物件。 |
| :nth-child | 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。 |
| :nth-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。 |
| :nth-last-child | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
| :nth-last-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
| :only-child | 匹配没有兄弟元素的元素。 |
| :only-of-type | 匹配兄弟元素中某类型仅有的元素。 |
| :optional | 匹配不是必填的form元素。 |
| :out-of-range | 按区间匹配元素，当值不在区间内的的时候匹配。 |
| :past | 匹配当前元素之前的元素。 |
| :placeholder-shown | 匹配显示占位文字的input元素。 |
| :playing | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 |
| :paused | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 |
| :read-only | 匹配用户不可更改的元素。 |
| :read-write | 匹配用户可更改的元素。 |
| :required | 匹配必填的form元素。 |
| :right | 在分页媒体中，匹配右手边的页。 |
| :root | 匹配文档的根元素。 |
| :scope | 匹配任何为参考点元素的的元素。 |
| :valid | 匹配诸如<input>元素的处于可用状态的元素。 |
| :target | 匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。 |
CSS3新增伪类有那些？
| 伪类 | 说明 |
|---|---|
| :root | 选择文档的根元素，等同于html元素 |
| :empty | 选择没有子元素的元素 |
| :target | 选取当前活动的目标元素 |
| :not(selector) | 选择除 selector 元素意外的元素 |
| :enabled | 选择可用的表单元素 |
| :disabled | 选择禁用的表单元素 |
| :checked | 选择被选中的表单元素 |
| :nth-child(n) | 匹配父元素下指定子元素，在所有子元素中排序第n |
| :nth-last-child(n) | 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数 |
| :nth-child(odd) | |
| :nth-child(even) | |
| :nth-child(3n+1) | |
| :first-child | |
| :last-child | |
| :only-child | |
| :nth-of-type(n) | 匹配父元素下指定子元素，在同类子元素中排序第n |
| :nth-last-of-type(n) | 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数 |
| :nth-of-type(odd) | |
| :nth-of-type(even) | |
| :nth-of-type(3n+1) | |
| :first-of-type | |
| :last-of-type | |
| :only-of-type | |
| ::selection | 选择被用户选取的元素部分（伪元素） |
| :first-line | 选择元素中的第一行（伪元素） |
| :first-letter | 选择元素中的第一个字符（伪元素） |
| :after | 在元素在该元素之后添加内容（伪元素） |
| :before | 在元素在该元素之前添加内容（伪元素） |
伪元素和伪类的区别和作用？
首先，伪类的效果可以通过添加实际的类来实现，而伪元素的效果可以通过添加实际的元素来实现。所以它们的本质区别就是是否抽象创造了新元素。
伪元素/伪对象： 不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
p::first-child {color: red}伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。
a:hover {color: #FF00FF}
p:first-child {color: red}注意：
- 伪类只能使用“：”；
- 而伪元素既可以使用“:”，也可以使用“::”；
- 因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
::before 和 :after 中双冒号和单冒号有什么区别？
- 在 CSS 中伪类一直用 : 表示，如 :hover, :active 等；
- 伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和:after；
- 后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类；
- 由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素；
综上所述：::before 是CSS3中写伪元素的新语法； :after是 CSS1 中存在的、兼容IE的老语法。
:link、:visited、:hover、:active的执行顺序是怎么样的？
L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括。
CSS3有哪些新特性?
关于CSS新增的特性，有以下：
- 选择器;
- 圆角（border-raduis）;
- 多列布局（multi-column layout）;
- 阴影（shadow）和反射（reflect）;
- 文字特效（text-shadow）;
- 文字渲染（text-decoration）;
- 线性渐变（gradient）;
- 旋转（rotate）/缩放（scale）/倾斜（skew）/移动（translate）;
- 媒体查询（@media）;
- RGBA和透明度 ;
- @font-face属性;
- 多背景图 ;
- 盒子大小;
- 语音; 等等
浏览器是怎样解析CSS选择器的？
浏览器解析CSS是从上到下，从右到左解析的，这样会提高查找选择器所对应的元素的效率（至于原因，有兴趣的童鞋可以自行去了解）。