• CSS 的选择器有哪些？
• CSS 的选择器优先级为？
• CSS 哪些属性可以继承？

CSS 选择器概念

CSS 选择器是 CSS 规则的一部分，是元素和其他部分组合起来告诉浏览器将规则中的 CSS 属性值应用到哪一个元素的方式。

哪个元素应当被选为应用规则中的 CSS 属性值的方式。

选择器选择的元素为选择器对象。

🌰 例子 / 对照例子：

<div id="box">
  <div class="one">
    <p class="one_1"></p>
    <p class="one_2"></p>
  	<p class="one_3"></p>
  </div>
  <div class="two">
    
  </div>
  <div class="three">
    
  </div>
</div>

常用的选择器有：

• id 选择器： #box ，选择 id 为 box 的元素；

• class 选择器： .one ，选择类名为 one 的 所有元素；

• 标签选择器： div ，选择标签为 div 的 所有元素；

• 后代选择器： #box div ，选择 id 为 box 内部的所有 idv 元素；

• 子代选择器： .one > .one_1 ，选择父元素为 .one 的所有 .one_1 子元素；

• 相邻同胞选择器： .one + .two ，选择紧跟在 .one 之后的所有 .two 元素；

• 群组选择器： div, p ，选择 div 和 p 的所有元素。

• 伪类选择器：

  • link ： 未访问的连接：
  • :visied ：选择已经访问过的连接 。
  • :active ：活动的连接；
  • :hover ：鼠标指针在元素上浮动；
  • :focus ：选择具有焦点的元素；
  • :first-child ：父元素的第一个子元素；

• 伪元素选择器：

  • :first-letter ：用于选取指定选择器的首字母；

  • :first-line ：用于选取选择器的首行内容；

  • :bofore ：在选择器被选元素的内容后面插入内容；

  • :afrer ：在选择器被选元素的内容后面插入内容。

• 属性选择器：

  • [attribute] ：选择带有 attribute 属性的元素；
  • [attribute=valu] ：选择所有使用 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 = 1 否则 A = 0；
• B 的值为 ID 选择器 出现的次数；
• C 的值等于 类选择器和属性选择器 出现的次数；
• D 的值等于 标签选择器和伪元素 出现的总次数；

🌰 例子：

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

• 没有内联样式， A = 0；
• ID 选择器出现了 1 次，B = 1；
• 类选择器出现了 1 次， C = 1；
• 标签选择器出现 3 次， D = 3 ；

该 （A，B，C，D）对应为 （0，1，1，3）

优先级计算后，比较规则：

• 从左到右依次进行比较，较大者优先级更高；
• 如果相等，往右移比较；
• 4 为全部相等，则后面会覆盖前面的样式（按照先后顺序）。

继承属性

指的是 给父元素设置的元素，后代元素会自动拥有这些属性。

继承属性分为：

• 字体系列属性：
  • 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-style
  • border-collapse
  • border-spacing
  • empty-cells
  • table-content
• 列表属性：
  • list-style-type
  • list-style-position
  • list-style
• 引用：
  • quotos
• 光标属性：
  • cursor

特殊的继承：

• a 标签的字体颜色不能被继承；
• h1 ~ h7 的字体大小不能被继承；

无继承的属性：

• display
• 文本属性：
  • vertical-align
  • text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等；
• 定位属性：浮动、清除浮动、定位等；
• 生成内容属性： content 、 counter-reset 、 counter-increment 等；
• 轮廓样式属性；
• 页面样式属性；