CSS-选择器(最全)

基本选择器

1、通配选择器
作用：可以选中所有的HTML元素。

 * {
    color: red;
 }

2、元素选择器

h1 {
     color: red;
     font-size: 40px;
 }

3、类选择器

.say {
    color: blue;
}

使用多个class：class="say big"
4、id选择器

#speak {
    color: purple;
}

注意：

id属性值，尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头，不要包含空格，区分大小写；
一个元素只能拥有一个id属性，多个元素的id属性值不能相同；
一个元素可以同时拥有id和clas属性。

总结：

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	* { color: red }
元素选择器	选中所有同种标签，但是不能差异化选择	h1 { color: red }
类选择器	选中所有特定类名（class值）的元素---使用频率很高	.say { color: red }
id选择器	选中特定id值的那个元素（唯一的）	#earthy { color: red }

复合选择器

1、交集选择器
作用：选中同时符合多个条件的元素；

交集有并且的含义，通俗理解，即......又......的意思，例如年轻且长的帅。

语法：选择器器1选择器2选择器3...选择器n { }
诸如p.beauty p.beauty#wc .beauty.rich等形式

p.beauty {
    color: green;
}

注意：

1、有标签名，标签名必须写在前面；
2、id选择器，理论上可以作为交集的条件，但是实际应用中几乎不用，因为没有意义；
3、交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素；
4、用的最多的交集选择器是：元素选择器配合类名选择器：例如：```p.beauty``。

2、并集选择器
作用：选择多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义，例如给我转10万块钱或者给我买辆车。

语法：选择器1,选择器2,选择器n { }

多个选择器通过英文逗号（,）连接，此处含义就是或。

.rich,
.beauty {
    font-size: 40px;
}

注意：

1、并集选择器，我们一般竖着写；
2、任何形式的选择器，都可以作为并集选择器的一部分；
3、并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系
父元素：直接包裹某个元素的元素，就是该元素的父元素；
子元素：被父元素直接包含的元素；
祖先元素：父亲的父亲.....，一直往外找，都是祖先；
后代元素：儿子的儿子....，一直往里找，都是后代；
兄弟元素：具有相同父元素的元素，互为兄弟元素。

3、后代选择器
作用：选中制定元素中，符合要求的后代元素。
语法：选择器1 选择器2 ...选择器n { } （先写祖先，再写后代）

选择器之间，可以用空格隔开，空格可以理解为：‘xxx中的’，其实就 后代的意思；
选择器1 2 3 4...n，可以是之前学过的任何一种选择器（如元素选择器、类选择器、id选择器、交集选择器、并集选择器）

ul li  {
    color: red;
}

4、子代选择器
作用：选中指定元素中，符合要求的子元素。

子代选择器又称：子元素选择器、子选择器。

语法：选择器1>选择器2>..。选择器n { }

选择器之间，用>隔开，可以理解为：“xxx的子代”，其实就是儿子的意思。
选择器1 2 3 4...n，可以是之前学过的任何一种选择器（如元素选择器、类选择器、id选择器、交集选择器、并集选择器）

div>a {
    color: red;
}

5、兄弟选择器
相邻兄弟选择器，作用：选中制定元素后，符合条件的相邻兄弟元素。

所谓相邻，就是紧挨着他的下一个。

语法：选择器1+选择器2 { }

div+p {
    color: red;
}

通用兄弟选择器，作用：选中制定元素后，符合条件的所有兄弟元素。
语法：选择器1~选择器2 { }

div~p {
    color: red;
}

注意：两种兄弟选择器，选择的是下面的兄弟。

6、属性选择器
作用：选中属性值符合一定要求的元素。
[属性值]选中具有某个属性的元素。

[title] {
    color: red;
}

[属性值="值"]选中包含某个属性，且属性值等于指定值的元素。

[title="biaoti"] {
    color: red;
}

[属性值^="值"]选中包含某个属性，且属性值以指定的值开头的元素。

[title^="b"] {
    color: red;
}

[属性值$="值"]选中包含某个属性，且属性值以指定的值结尾的元素。

[title$="i"] {
    color: red;
}

[属性值*="值"]选中包含某个属性，且属性值包含指定值的元素。

[title*="t"] {
    color: red;
}

伪类选择器

概念
作用：选中特殊状态的元素。

如何理解“伪”？---虚假的，不是真的；
如何理解“伪类”？---像类（class），但不是类，是元素的一种特殊状态。

1、动态伪类
:link超链接未被访问的状态；
:visited超链接访问过的状态；
:hover鼠标悬停在元素上的状态；
:active元素激活的状态；

什么是激活？---按下鼠标不松开。
注意点：遵循LVHA的顺序，即link、visited 、hover、 active 。顺序不对的会不展示。

:focus获取焦点的元素。

表单类元素才能使用:focus伪类；
当用户：点击元素、触摸元素，或者通过键盘的tab键等方式，选择元素时，就是获得焦点。

a:link {
    color: red;
}
a:visited {
    color: green;
}
a:hover,span:hover {
    color: blue;
}
a:active,span:active {
    color: gray
}
input:focus {
    color: red;
}

2、结构伪类
选中的是div的第一个儿子p元素（按照所有兄弟计算的）

div>p:first-child {
    color: red;
}

选中的是div的儿子中的，所有p元素的第一个儿子,类似的有last-of-type、nth-of-type

div>p:first-of-type {
    color: red;
}

选中的是div的最后一个儿子p元素（按照所有兄弟计算的）

p:last-child {
    color: green;
}

选中的是某个父类中的第三个儿子p元素（按照所有兄弟计算的）

p:nth-child(3) {
    color: blue;
}

nth内“值”,实际定义为an+b,常用的如下表：

值	说明
2n或even	选中序号为偶数的子元素
2n+1或odd	选中序号为奇数的子元素
-n-1	选中的是前3个

另外一些不常用的结构伪类：

代码	说明
指定元素:nth-last-child(n)	选中某个父元素中倒数第n个儿子的指定元素---按照所有兄弟
指定元素:nth-last-of-type(n)	选中某个父元素中倒数第n个儿子的指定元素---按照指定元素同类型兄弟
指定元素:only-child	选中某个父元素中没有兄弟的指定元素
指定元素:only-of-type	选中某个父元素中没有同类型兄弟的指定元素
:root	选中的是根元素
指定元素:empty	选中没有内容的指定元素

3、否定伪类
选中的是div的儿子p元素，但是排出类名为fail的元素

div>p:not(.fail) {
        color: grey;
}

选中的是div的儿子p元素，但是排出title属性以“你要加油”开头的

div>p:not([title^="你要加油"]) {
    color: red;
}

选中的是div的儿子p元素，但是排出第一个儿子p元素

div>p:not(:first-child) {
    color: red;
}

4、UI伪类
选中的是勾选的复选框或单选按钮

input:checked {
    width: 40px;
    height: 40px;
}

选中的是被禁用的input元素

input:disabled {
    color: grey;
}

选中的是可用的input元素。

input:enabled {
    color: grey;
}

5、目标伪类
选中锚点所指定的元素。

input:target {
    color: green;
}

6、语言伪类
选中语言为en的元素，本质是lang的属性值。

input:lang(en) {
    color: red;
}

选中所有语言为zh-CN的元素。

:lang(zh-CN) {
    color: green;
}

伪元素选择器

什么是伪元素？很像元素，但不是元素（element），是元素中的一些特殊位置。
选中的div中的第一个文字/字母(注意是字母，不是单词)

div::first-letter {
    color: pink;
}

选中的div中的第一行

div::first-line {
    background-color: yellow;
}

选中的是div中被鼠标选择的文字

div::selection {
    background-color: green;
    color: red;
}

选中的是input中元素中的提示文字

input::placeholder {
    color: skyblue;
}

选中的是元素的前或后（after）添加内容

p::before {
    content: "￥";
}

注意：CSS3中是两个":"，CSS2中是一个":",因为当时并未定义，所以一个或者两个冒号都可以，但是selection 和placeholder 是CSS3提出的必须用两个，所以建议所有都使用CSS3样式，两个冒号。

CSS三大特性

层叠性
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？----元素的同一个样式名，被设置了不同的值，这就是冲突。

继承性
概念：元素会自动拥有其父元素，或其祖先元素上所有设置的某些样式。
规则：优先集成离得近的。
常见的可继承属性：

text-??,font-??, line-??, color ....

备注：参照MDN网站，可查询属性是否可被继承。
优先级
基本选择器优先级：行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器
复杂选择器需要计算权重

格式：（a，b，c）
a：id选择器的个数
b：类、伪类、属性 选择器的个数
c：元素、伪元素 选择器的个数

鼠标放在选择器上方，VSCode可以给算出来

另外在优先级最高的是: !important

div {
    color: skyblue !important;
}