五、属性选择器¶

属性选择器	描述	举例
E[attr]	用于选取带有指定属性的 E 元素	a[target]
E[attr="value"]	用于选取带有指定属性和值的 E 元素	a[target='_blank']
E[attr~=value]	用于选取属性值中包含指定词汇的 E 元素	span[class~='icon']
E[attr^=value]	匹配属性值以指定值开头的每个元素	span[class^='icon']
E[attr$=value]	匹配属性值以指定值结尾的每个元素	span[class$='icon']
E[attr*=value]	匹配属性值中包含指定值的每个元素	span[class*='icon']
E[attr \|= 'value']	用于选择属性值等于 value 或以 value- 开头的 E 元素	span[class \|= 'icon']

1、E[attr] 选择器¶

TIP

用于选取带有指定属性的 E 元素。
举例：a[target] 选择带有 target 属性的 a 标签，添加相应的样式

<style>
  a[target] {
    background-color: yellow;
  }
</style>
<body>
  <a href="" target="_blank">艾编程</a>
  <a href="">爱前端</a>
</body>

渲染效果： ![[Pasted image 20260226163651.png]]

2、E[attr="value"] 选择器¶

TIP

用于选取带有指定属性和值的 E 元素。
举例：a[target='_blank'] 选择 target 属性值为 _blank 的 a 标签

<style>
  a[target="_blank"] {
    background-color: red;
  }
</style>
<body>
  <a href="" target="_blank">艾编程</a>
  <a href="" target="_self">爱前端</a>
</body>

渲染效果： ![[Pasted image 20260226163737.png]]

3、E[attr~="value"] 选择器¶

TIP

用于选取属性值中包含指定词汇的 E 元素。
举例：span[class~='icon'] 选取属性 class 的值中包含 icon 单词的 span 元素

<style>
  span[class~="icon"] {
    background-color: yellow;
  }
</style>
<body>
  <span class="icon">icon</span>
  <span class="ic on-close">icon-close</span>
  <span class="icon button">icon button</span>
  <span class="icons">icons</span>
</body>

渲染效果： ![[Pasted image 20260226163820.png]]

4、E[attr^="value"]¶

TIP

匹配属性值以指定值开头的每个元素。
举例：span[class^='icon'] 选择 class 属性值以 icon 开头的 span 元素

<style>
  span[class^="icon"] {
    background-color: yellow;
  }
</style>
<body>
  <span class="icons">icons</span>
  <span class="icon-close">icon-close</span>
  <span class="button icon">button icon</span>
  <span class="icon play">icon play</span>
</body>

渲染效果： ![[Pasted image 20260226163859.png]]

5、E[attr$="value"]¶

TIP

匹配属性值以指定值结尾的每个元素。
举例：span[class$='icon'] 选择 class 属性值以 icon 结尾的 span 元素

<style>
  span[class$="icon"] {
    background-color: yellow;
  }
</style>
<body>
  <span class="play-icon">play-icon</span>
  <span class="icons">icons</span>
  <span class="xxicon">xxicon</span>
</body>

渲染效果： ![[Pasted image 20260226163939.png]]

6、E[attr_="value"]_*¶

TIP

匹配属性值中包含指定值的每个元素。

<style>
  span[class*="icon"] {
    background-color: yellow;
  }
</style>
<body>
  <span class="icon">icon</span>
  <span class="play-icons">play-icons</span>
  <span class="button icons">button icons</span>
  <span class="iconfont">iconfont</span>
</body>

渲染效果： ![[Pasted image 20260226164017.png]]

7、E[attr|="value"]¶

TIP

用于选择属性值等于 value 或以 value-开头的 E 元素
举例：span[class|='icon'] 选择 class 属性值是 icon 或以 icon-开头的 span 元素

<style>
  span[class|="icon"] {
    background-color: yellow;
  }
</style>
<body>
  <span class="icon">icon</span>
  <span class="icons-play">icons-play</span>
  <span class="icon-button">icon-button</span>
  <span class="iconfont">iconfont</span>
</body>

渲染效果： ![[Pasted image 20260226164107.png]] 注：

实际开发中用到的很少，只做了解即可

六、序号选择器¶

TIP

更多选择器，查阅官方资料地址

选择器	说明
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第 n 个子元素
:nth-last-child(n)	倒数第 n 个子元素
:nth-child(an+b)	n 值从 0 开始，a 和 b 为任意整数
:nth-of-type(n)	第 n 个某类型子元素
:nth-last-of-type(n)	倒数第 n 个某类型子元素
:nth-of-type(an+b)

1、:first-child 和 :last-child 选择器¶

TIP

:first-child 表示在一组兄弟元素中的第一个元素
:last-child 表示在一组兄弟元素中的最后一个元素。

语法：

/* 表示在一组兄弟元素中的第一个元素 */
:first-child {
}
/* 表示在一组兄弟元素中的最后一个元素 */
:last-child {
}

案例

<style>
  /* ul里面的 第一个 li 元素*/
  ul li:first-child {
    background-color: skyblue;
  }
  /* ul里面的 最后一个li 元素*/
  ul li:last-child {
    background-color: pink;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

![[Pasted image 20260226164228.png]]

注意区分

E:first-child 与 E :first-child 的区别

<style>
  /* 选中 .box 的第一个子元素，并且这个子元素是一个p标签*/
  .box p:first-child {
    background-color: skyblue;
  }
  /*选中 .box 下面的 p标签中的 第一个子元素 */
  .box p :first-child {
    background-color: khaki;
  }
</style>
<div class="box">
  <p>我是第一个p标签</p>
  <p><span>1span</span><span>2span</span></p>
  <h3>2h3</h3>
  <div>3div</div>
  <div>4div</div>
</div>

![[Pasted image 20260226164321.png]]

2、:nth-child(n) 和 :nth-last-child(n) 选择器¶

TIP

:nth-child(n) 选择父元素的第 n 个子元素
:nth-last-child(n) 选择父元素的倒数第 n 个子元素

固定值写法

/* :nth-child(2) 选择父元素的第2个子元素 */
:nth-child(2) {
}
/* :nth-last-child(3) 选择父元素的倒数第3个子元素 */
:nth-last-child(3) {
}

案例：

<style>
  /* 选中 .box 中的第2个子元素 */
  .box :nth-child(2) {
    border: 2px solid blue;
  }
  /* 选中 .box 中的倒数第2个子元素 */
  .box :nth-last-child(2) {
    background-color: red;
  }
</style>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

![[Pasted image 20260226164407.png]]

注意区分 E:nth-child(2) 与 E :nth-child(2)

<style>
  /* 选中 .box 中的第2个子元素，并且第二个子元素要是p标签 */
  .box p:nth-child(2) {
    border: 2px solid blue;
  }
  /* 选中 .box中的 p 标签下的第二个子元素 */
  .box p :nth-child(2) {
    background-color: yellow;
  }
</style>

<div class="box">
  <div>1</div>
  <p><span>1span</span><span>2span</span></p>
  <div>3</div>
  <p><span>1span</span><span>2span</span></p>
</div>

![[Pasted image 20260226164455.png]]

3、:nth-child(an+b)¶

TIP

a、b 表示整数，正的负的都可以
n 表示从 0 开始的正整数，如 0，1，2，3，4
虽然 n 是从 0 开始的正整数，但是因为没有第 0 个子元素，所以
- nth-child(n) 表示是选中每一项，如：1，2，3，4，5......
- nth-child(2n) 表示选中偶数项，如：2，4，6，8........
- nth-child(2n+1) 表示选中奇数项，如：1，3，5，7........
- nth-child(3n+1) 表示选中 1，4，7，10 ......
选中偶数项和奇数项，还可以用关键词 even 和 odd 来表示
- :nth-child(even) 选中偶数项
- :nth-child(odd) 选中奇数项

案例

<style>
  /* 选中偶数行 */
  ul li:nth-child(2n) {
    background-color: pink;
  }
  /* 选中奇数行 */
  ul li:nth-child(2n + 1) {
    background-color: skyblue;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
</body>

渲染效果： ![[Pasted image 20260226164558.png]]

4、:nth-of-type(n) 和 :nth-last-of-type(n)¶

TIP

:nth-of-type(n) 表示选中不同类型的第 n 个子元素
:nth-last-of-type(n) 表示选中不同类型的倒数第 n 个子元素

/* 选中E元素的子元素中，不同类型的第 1个元素*/
E :nth-of-type(1) {
}
/* 选中E元素的子元素中，不同类型的倒数第1个元素 */
E :nth-last-of-type(1) {
}

<style>
  /* 选中 .box中的不同类型的第一个元素 */
  .box :nth-of-type(1) {
    background-color: red;
  }
  /* 选中 .box中第二个p标签 */
  .box p:nth-of-type(2) {
    background-color: yellow;
  }
</style>
<body>
  <div class="box">
    <div>1div</div>
    <p>1p</p>
    <div>2div</div>
    <p>2p</p>
    <h3>1h3</h3>
  </div>
</body>

渲染效果： ![[Pasted image 20260226164653.png]]

5、:nth-of-type(an+b) 选择器¶

TIP

a、b 表示整数，正的负的都可以
n 表示从 0 开始的正整数，如 0，1，2，3，4
- :nth-of-type(2n) 选中父元素中的所有偶数行子元素
- :nth-last-of-type(2n+1) 选中父元素不同类型的奇数项

案例

<style>
  .box :nth-of-type(2n) {
    background-color: red;
  }
  .box div:nth-of-type(2n) {
    background-color: yellow;
  }
</style>
<body>
  <div class="box">
    <div>1div</div>
    <div>2div</div>
    <p>1p</p>
    <p>2p</p>
    <div>3div</div>
    <p>3p</p>
    <div>4div</div>
    <p>34</p>
  </div>
</body>

渲染效果： ![[Pasted image 20260226164752.png]]

七、其它选择器¶

TIP

深入浅出其他选择器

1、:only-child 选择器¶

TIP

匹配没有任何兄弟元素的元素 (only-child 唯一的子元素，也就是说这个元素没有兄弟元素)

语法

/* 选中没有兄弟元素的p元素 */
p:only-child {
}

<style>
  .box p:only-child {
    background-color: red;
  }
</style>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
  </div>
  <div class="box">
    <p>3</p>
  </div>
</body>

![[Pasted image 20260226164848.png]]

2、:root 选择器¶

TIP

:root用于选择文档的 html 根元素，和直接通过 html 标签选择 html 根元素是一个意思，但 :root的优先级会比 html 标签选择器高。

语法：

:root {
  ........
}

<style>
  :root {
    font-size: 20px;
    color: red;
  }
  html {
    font-size: 50px;
  }
</style>

<body>
  我的 font-size 字体大小是 20px
</body>

![[Pasted image 20260226164951.png]]

3、:empty 选择器¶

TIP

选择没有子元素的元素（子元素包括元素节点和文本节点和空格）

语法

/* 选择没有任何子级的E元素（包括文本节点）*/
E:empty {
}

/* 选择没有任何子级的p元素，包括没有文本节点 */
p:empty {
}

<style>
  p {
    border: 2px solid #000;
    height: 20px;
    width: 100px;
  }
  p:empty {
    background-color: red;
  }
</style>
<body>
  <p></p>
  <p><span></span></p>
  <p>1111</p>
  <p></p>
</body>

渲染效果： ![[Pasted image 20260226165057.png]]

八、案例¶

TIP

实践应用案例，加深理解

1、CSS 开关按钮

核心知识：

:checked 选择器
< label >标签应用
后续兄弟选择器
::after 伪元素选择器 ![[Pasted image 20260226165545.png]]

<style>
  .button {
    width: 60px;
    height: 26px;
    padding: 2px;
    background-color: #ddd;
    border-radius: 20px;
  }
  .button::after {
    display: inline-block;
    content: "";
    width: 26px;
    height: 26px;
    background-color: #fff;
    border-radius: 100%;
  }
  input {
    display: none;
  }
  input:checked ~ .button {
    background-color: skyblue;
  }
  input:checked ~ .button::after {
    float: right;
  }
</style>

<label for="on-off">
  <input type="checkbox" id="on-off" />
  <div class="button"></div>
</label>
<br />
<label for="on-off2">
  <input type="checkbox" id="on-off2" />
  <div class="button"></div>
</label>

2、带图标的按钮¶

核心知识：

:hover 伪类选择器
元素类型转换
background 背景样式

原始效果	鼠标悬停效果
![[Pasted image 20260226170016.png]]	![[Pasted image 20260226170026.png]]

<style>
  .down {
    display: inline-block;
    width: 130px;
    height: 40px;
    /* 首行缩进 或用内边距+计算   或 内边距+怪异盒子模型 */
    text-indent: 45px;
    line-height: 40px;
    text-decoration: none;
    color: #d81e06;
    border-radius: 10px;
    background: #ddd url(images/down1.png) no-repeat 5px center;
  }
  .down:hover {
    /* 样式重写 图片位置 重复度用.down选择器中的样式 */
    background-color: #d81e06;
    background-image: url(images/down2.png);
    color: #fff;
  }
</style>
<body>
  <a href="#" class="down"> 点击下载</a>
</body>