CSS选择器、优先级、可以继承的属性

CSS 选择器、优先级、可以继承的属性

一、常见选择器

CSS 中常见的选择器有：

基本选择器：*（通配符）、标签选择器、.class、#id、[attr]、组合器（空格后代、> 子代、+ 相邻兄弟、~ 通用兄弟）。
伪类选择器（单冒号）：
- :link：选择未被访问的链接；
- :visited：选取已被访问的链接；
- :active：选择活动链接；
- :hover：鼠标指针浮动在上面的元素；
- :focus：选择具有焦点的元素；
- :first-child：父元素的首个子元素；
- :last-child：一组兄弟元素中的最后一个元素；
- :first-of-type：一组同级元素中其类型的第一个元素；
- :not(selector)：选择与 <selector> 不匹配的所有元素；
- :nth-child(n)：根据元素在一组同级中的位置匹配元素；
- :nth-last-of-type(n)：基于它们在一组兄弟元素中的位置，从末尾开始计数。
伪元素选择器（双冒号）：
- ::first-letter：用于选取指定选择器的首字母；
- ::first-line：选取指定选择器的首行；
- ::before：在被选元素的内容前面插入内容；
- ::after：在被选元素的内容后面插入内容；
- ::selection、::placeholder。
属性选择器：
- [attribute]：选择带有 attribute 属性的元素；
- [attribute=value]：选择所有使用 attribute=value 的元素；
- [attribute~=value]：选择 attribute 属性包含 value 的元素；
- [attribute|=value]：选择 attribute 属性以 value 开头的元素；
- [attribute*=value]：选择 attribute 属性值包含 value 的所有元素；
- [attribute^=value]：选择 attribute 属性开头为 value 的所有元素；
- [attribute$=value]：选择 attribute 属性结尾为 value 的所有元素。

二、优先级

相信大家对 CSS 选择器的优先级都不陌生：内联 > ID 选择器 > 类选择器 > 标签选择器。

到具体的计算层面，优先级是由 A、B、C、D 的值来决定的，其中它们的值计算规则如下：

A：内联样式的数量；
B：ID 选择器的数量；
C：类选择器、伪类选择器、属性选择器的数量；
D：标签选择器、伪元素选择器的数量。

举个例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A、B、C、D 的值：(0, 1, 1, 3)。

比较规则：从左到右逐位比较，位数大的优先级高；位数相同则向后比较一位。

内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用 !important。

三、可以继承的属性

在 CSS 中，继承是指给父元素设置一些属性，后代元素会自动拥有这些属性。

关于继承属性，可以分成：

字体系列属性：
- font、font-family、font-weight、font-size、font-style、font-variant。
文本系列属性：
- text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color。
元素可见性：visibility。
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout。
列表属性：list-style-type、list-style-position、list-style。
引用：quotes。
光标属性：cursor。