CSS选择器及优先级

选择器分类

id选择器

<div id="wrap"></div>
#wrap{ background: black; }

类选择器

<div class="wrap"></div>
.wrap{ background: black; }

标签选择器

div{
    margin:0;
}

属性选择器

<input type="text">
[type=text] {
    background: black;
}

伪类选择器

a元素的伪类：link、visited、active、hover。
其他
(1) li:first-child{} (修饰第一个li)
(2) li:last-child{} (修饰最后一个li)
(3) li:nth-child{} (修饰第()个li)
(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

<ul>
    <li></li>
    <li></li>
    <li><a href=""></a></li>
</ul>
li:first-child {
    border:1px solid black;
}
li:last-child {
    border:1px solid red;
}
li:nth-child(2){
    border:1px solid yellow;
}

伪元素选择器

p::first-line {
  color: blue;
  text-transform: uppercase;
}

群选择器
以，分隔(逗号分隔开需要修饰的模块名)

<div class="qun">
    <p><span></span></p>
    <p></p>
</div>

.qun,span {
    margin:0;
}

全局选择器
以*开头(星号标在大括号前，修饰了包含body所有的标签)

* {
    margin:0;
}

紧邻兄弟选择器（相邻选择器）
以+隔开相邻关系的元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p> /*修饰*/
    <p>第三</p>
</div>

.first+p{
    margin:0;
}

一般兄弟选择器
以~隔开兄弟关系的元素，第二个节点在第一个节点后面的任意位置，并且这俩节点的父节点相同。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p> /*修饰*/
    <p>第三</p> /*修饰*/
</div>

.first~p{
    margin:0;
}

子元素选择器
以>隔开父子级元素，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
</div>

.qun > span {
    color:black;
}

后代选择器
以空格隔开包含关系的元素，选择元素的所有后代

<div class="qun">
    <p class="first">
        <span>第一</span> /*修饰*/
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
</div>

.qun span {
    color:black;
}

伪类和伪元素的区别

理解：伪类：宦官；伪元素：皇帝。

根本区别

伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

伪类：伪类的操作对象是原来的dom结构里就存在的元素。伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。
伪元素：创建对象。伪元素的操作对象是新生成的dom元素,这个对象不会占用DOM节点，不会出现在DOM中，不会改变文档的内容，不可复制，仅仅是在CSS渲染层加入。

//伪类
<style>
  li:nth-child(2n+1) {
    color: #00a2d4;
  }
</style>

<ul>
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
</ul>

//伪元素
<style>
  p::first-letter {
    color: red;
  }
</style>
<p>一二三四</p>
//相当于
<p><span class="first-letter">一</span>二三四</p>

数量

一个css选择符（朝代）只能有一个伪元素，但可以有多个伪类
伪类可以进行多个拼接。伪元素不能进行拼接。

<style>
    input:out-of-range:focus {
      background: #00a2d4;
    }
    input:out-of-range + h2::after {
      content: "超出范围"
    }
</style>
<body>
<input type="number" min="1" max="10">
<h2>结果：</h2>
</body>

位置

伪元素在后面，伪类在前面。

<style>
    input {
      display: block;
    }
    input::after {
      content: "已勾选";
      display: none;
      width: 50px;
      height: 50px;
      margin-left: 12px;
    }
    input:checked::after {
      display: block;
    }
</style>

<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>

使用场景

伪类
状态类::link,:visited,:hover,:active,:focus
结构类:first-child,:last-child,:nth-child,:nth-of-type
表单类::checked,:disabled,:valid,:required
语言类::dir,:lang
伪元素
::before,::after
::first-letter,::first-line
::selection
::selection
::placeholder
::backdrop

	语法	数量	位置	类与元素	使用场景
伪类	:	多个	前方和后方	修饰	多
伪元素	::	一个	后方	创建对象	少

优先级的计算规则

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。

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

如果存在内联样式，那么A = 1, 否则A = 0;
B的值等于ID选择器出现的次数;
C的值等于类选择器和属性选择器和伪类出现的总次数;
D的值等于标签选择器和伪元素出现的总次数。

例子：

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

套用上面的算法，依次求出A B C D的值：

因为没有内联样式，所以A = 0;
ID选择器总共出现了1次，B = 1;
类选择器出现了1次，属性选择器出现了0次，伪类选择器出现0次，所以C = (1 + 0 + 0) = 1；
标签选择器出现了3次，伪元素出现了0次，所以D = (3 + 0) = 3;

上面算出的A、B、C、D可以简记作：(0, 1, 1, 3)。
比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

参考文章：https://www.cnblogs.com/yugege/p/9918232.html

CSS选择器及优先级

选择器分类

伪类和伪元素的区别

根本区别

数量

位置

使用场景

优先级的计算规则

梁柱

引用和评论

简述字符集与编码

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了