CSS选择器

CSS 选择器

**提示：**在规则的最后一个声明后也加上分号是一个好习惯。

在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

选择器表：https://www.w3school.com.cn/cssref/css_selectors.asp

元素选择器

元素选择器是 CSS 选择器中最常见的选择器，元素选择器可以直接通过页面标签进行选择

p {
    color: red;
    font-size: 16px;
}

我们可以直接选到所有的 p 元素，使其属性发生改变

分组选择器

分组选择器也被称之为（并集选择器），假设我们希望 h3 标签和 p 标签背景都变为天蓝色

h3 {
	background-color: skyblue;
}
p {
    background-color: skyblue;
}

这样写的话，很显然我们有很多重复的代码。徒增功耗，所以可以使用选择器分组简化代码

h3,p {
    background-color: skyblue;
}

这样写的好处是，不仅我们可以在写的时候简化代码，还可以在修改的时候简化操作

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器，这个声明等价于列出了文档中所有元素的一个分组选择器。

下面的规则可以使文档中的每个元素都为红色：

* {
	color: red;
}

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。只有适当地标记文档后，才能使用这些选择器

所以使用这种选择器通常需要先做一些构想和计划。

注意 ：类名不能以数字开头

<p class="demo">你好呀，我是第一个p标签</p>
<p class="demo">你好呀，我是第二个p标签</p>

然后我们可以使用类选择器去选择到标记过 class 的标签，也就是在类名前加上 .

.demo {
	color: red;
    font-size: 16px;
}

结合元素选择器使用 类选择器可以结合元素选择器来使用。

<p class="demo">你好呀，我是一个p标签</p>
<h2 class="demo">你好呀，我是一个h2标签</h2>

假如说，以上情况下。我只想选取到 p 标签下的 demo 类，所以就可以使用元素类选择器 （交集选择器）

p.demo {
    color: red;
    font-size: 16px;
}

多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔，词序没有影响。

<p class="big">我很大</p>
<p class="fat">我很胖</p>
<p class="big fat">我又大又胖</p>

这种情况下，big 和 fat 都可以选到第三个p标签，而且我们还可以使用 big 和 fat 合写的方式单独选到第三个 p 标签

.big {font-size: 30px;}
.fat {font-weight: bold;}
.big.fat {color: #DD5145;}

ID 选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。只有适当地标记文档后，才能使用这些选择器

所以使用这种选择器通常需要先做一些构想和计划。

注意 ：ID名不能以数字开头

注意 ：ID名不能重复，区分大小写

<p id="demo1">你好呀，我是第一个p标签</p>
<p id="demo2">你好呀，我是第二个p标签</p>

然后我们可以使用 ID 选择器去选择到标记过 id 的标签，也就是在 ID 名前加上 #

#demo1 {
	color: red;
    font-size: 16px;
}
#demo2 {
	color: gold;
    font-size: 20px;
}

!important

!important 写在 css 属性值的后边表示这个属性值是页面内最重要的

p{
  text-align: center;
  color: red !important; /* 在页面内级别最高 */
}

总结：选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器签 > 通配符 > 浏览器默认属性

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

<a href="#">百度</a>
<a href="#">搜狗</a>
<a href="#">夸克</a>

[href]{
    text-decoration: none;
}

也可以只选择有某属性的元素

<a href="#">百度</a>
<a name="mao">锚点</a>

a[href]{
	color: #DD4F43;
}

具体属性选择

公式：标签[属性 = "属性值"];

部分属性选择

类型	描述
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

属性选择器手册

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

后代选择器

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

后代选择器中，只要是父元素内的后代元素，不管层级，统统选中

父元素 后代元素{
	声明
	......
}

在后代选择器中，规定 父元素 和 后代元素 之间用空格隔开。

<p>
    从前有座山，
    <b>
        山里有座庙。
    	<span>
        	庙里有个小和尚，
        </span>
    </b>
    <span>
    	老和尚给小和尚说。
    </span>
</p>

p span{
    color: red;
}

子代选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

子代选择器中，只有被选中层级的后代元素才可以被选中

父元素>子元素{
	声明
	......
}

在子代选择器中，规定 父元素 与 子代元素 之间用大于号 > 隔开。

<p>
    从前有座山，
    <b>
        山里有座庙。
    	<span>
        	庙里有个小和尚，
        </span>
    </b>
    <span>
    	老和尚给小和尚说。
    </span>
</p>

p>span{
    color: yellow;
}
p>b>span{
    color: yellow;
}

相邻选择器

相邻选择器 +（Adjacent sibling selector）可以选择紧挨在元素后的兄弟元素，且二者有相同父元素。

注意：相邻选择器只能选择元素相邻的兄弟元素

<p class="bro">我是哥哥</p>
<p>我是弟弟</p>

.bro + p{
	color: aquamarine;
}

相邻选择器的进阶用法：

<p>我是大娃</p>
<p>我是二娃</p>
<p>我是三娃</p>
<p>我是四娃</p>
<p>我是五娃</p>

p + p {
	color: rbga(0,0,0,0.5);
}

兄弟选择器

兄弟选择器 ~ 可以选择元素后的所有同级元素，且二者拥有相同父元素

<p class="bor">我是一个p标签</p>
<p class="bor">我是一个p标签</p>
<p class="bor">我是一个p标签</p>
<p class="bor">我是一个p标签</p>
<p class="bor5">我是最后一个p标签</p>

.bor ~ .bor5{
	color: red;
}

总结：选择器权值

• 行内样式表的权值为 1000
• ID 选择器的权值为 100
• Class 类选择器的权值为 10
• HTML 标签选择器的权值为 1

★★★权值实际并不是按十进制，用数字表示只是说明思想★★★

判断方式：当选择器中有相同级别时判断下一级别，当级别不同时则直接选取级别大的一方即可

id + class 小于 id + class*2
id + class 大于 id + div*10000

常用伪类选择器

:first-child

:last-child

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

1、以下写法表示：在 A 的父元素下的子元素中，要求匹配到的第一个子元素类型与 A 相同

A:first-child{}

<div id="father1">
    <p class="son1">我是第一行</p>
    <p class="son2">我是第二行</p>
    <p class="son2">我是第三行</p>
</div>
<hr/>
<div id="father2">
    <p class="son2">我是第一行</p>
    <p class="son1">我是第二行</p>
    <p class="son1">我是第三行</p>
</div>

<style>
    .son1:first-child {
        color: yellow;
    }
</style>

以上案例可以选到 father1 下的第一个 p 标签，是因为其父元素下的第一个元素的类就是选择器里面的 son1

但是 father2 下的第一个元素的类不是 son1 所以选择器并不能选到

2、以下写法表示：在 A 元素下的子元素中的所有 B 元素。

A:first-child B{}

<div id="father1">
    <p class="son1">我是第一行</p>
    <p class="son2">我是第二行</p>
    <p class="son2">我是第三行</p>
</div>
<hr/>
<div id="father2">
    <p class="son2">我是第一行</p>
    <p class="son1">我是第二行</p>
    <p class="son1">我是第三行</p>
</div>

<style>
    div:first-child .son2{
        color: yellow;
    }
</style>

以上案例可以选到 father1 下的所有 son2 类，是因为 father1 是同级中的第一个 div 元素。

3、以下写法表示：可以选到在 A 元素下的任意类型的第一个子元素

A>:fist-child{}

<div id="father1">
    <p class="son1">我是第一行</p>
    <p class="son2">我是第二行</p>
    <p class="son2">我是第三行</p>
</div>
<hr/>
<div id="father2">
    <p class="son2">我是第一行</p>
    <p class="son1">我是第二行</p>
    <p class="son1">我是第三行</p>
</div>

<style>
    div>:first-child{
        color: yellow;
    }
</style>

:nth-child(n)

:nth-last-child(n)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

:first-of-type

:last-of-type

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

:first-of-type 可以很好的解决 first-child 选择器的匹配不到相同元素的问题

A:fist-of-child{}

以上写法表示，在 A 的父元素下的第一个 A 同类型的元素

<div>
    <p>我是第一个 p 标签</p>
    <p>我是第二个 p 标签</p>
    <h4>我是第一个 h4 标签</h4>
    <h4>我是第二个 h4 标签</h4>
</div>

<style>
    p:first-of-type{
        color: skyblue;
    }
    h4:first-of-type{
        color: hotpink;
    }
</style>

:nth-of-type(n)

:nth-of-last-child(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。