# CSS 高级（复合）选择器

TIP

在前面的课程中，我们学习了 CSS 基础选择器：标签选择器、class 选择器、id 选择器、* 通配符选择器

并且还讲到基础选择器之间的优先级，基础选择器优先级从高到低顺序如下

行内样式 > id 选择器 > class 选择器 > 标签选择器 > * 通配符选择器

本节课我们接着来学习其它的复合选择器，复合选择器都是多个选择器组合而成的。

详细查阅，CSS 高级选择器官方文档 (opens new window)

# 一、交集与并集选择器

选择器名称	示例	描述
交集选择器	`li.para`	选择既是 li 标签，也属于 para 类的标签
并集选择器	`ul,ol`	选择所有 ul 和 ol 标签

# 1、交集选择器

TIP

任意不同选择器组合在一起，选择器之间紧挨着，中间没有空格。

语法：

选择器1.选择器2 { }
选择器1.选择器2.选择器3 { }

h3.title {
} /* 选择h3标签中class名为title的元素 */
.box.box1 {
} /*选择 class中包含"box box1" 的 标签元素 如 class="box box1" */

案例

<style type="text/css">
  /*选择h3标签中class名为title的元素，将背景颜色为黄色*/
  h3.title {
    background-color: yellow;
  }
  /* 选择 class中包含"box box1" 的 元素 */
  .box.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<body>
  <h3>无任可样式</h3>
  <h3 class="title">h3.title</h3>
  <div class="box box1"></div>
</body>

渲染效果：

# 2、并集（分组）选择器

TIP

多个选择器之间用 , 逗号隔开

当几个选择器的操作样式是一样时，我们可以选择用群组选择器来操作，这样可以节省代码。

语法

选择器1,
选择器2,
选择器3 {
}

/* 选择 body  ul  p h3 标签 */
body,
ul,
p,
h3 {
}
/*
选择 
class='box1'  的元素
class='title' 的 h3 元素
class='box' 里面的 class="box2" 里面的 p元素
*/
.box1,
h3.title,
.box .box2 p {
}

案例

<style>
  /* 复杂写法
    .box{color:red;}
    h3 span{color:red;}
    p span.title{color:red;}
    */
  /*此写法为以上写法的简写形式-分组选择器*/
  .box,
  h3 span,
  p span.title {
    color: red;
  }
</style>
<body>
  <div class="box">box中内容</div>
  <h3><span>h3中的span</span></h3>
  <p><span class="title">p标签</span></p>
</body>

渲染效果：

# 3、样式初始化

TIP

在实际开发中，我们会把 html 标签默认的样式清除掉，因为不同的浏览器 html 标签的默认样式会有少许差异。

在清除默认样式（样式初始化）时，用到的就是分组选择器。

body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
}

你可能会问

默认样式没用，为什么浏览器还要给他加默认样式呢？是因为要表现 html 标签本身的结构特性，或语义化。

# 二、关系选择器

选择器	举例
后代选择器	div p span{ }
子代选择器	div > span { }
相邻兄弟选择器	.box + p{ }
后续兄弟选择器	.box ~ p{ }

# 1、后代选择器

TIP

用 “ ”（空格）组合选择器，选择前一个元素的后代节点。
后代并不一定是 “儿子”，只要是当前元素里面的元素，都算当前元素的后代。

语法

选择器1 选择器2 {
}
选择器1 选择器2 选择器3 {
}

/* 选中位于任意 div 元素之内的 p 元素 */
div p {
}
/* 选中位于任意 div 元素之内的 p 元素之内的 span 元素 */
div p span {
}

案例

<style>
  /* 选中位于任意 div 元素之内的 p 元素 */
  div p {
    color: red;
  }
  /* 选中位于任意 div 元素之内的 p 元素之内的 span 元素 */
  div p span {
    color: blue;
  }
</style>

<div>
  <p>
    p 标签
    <span>span标签 </span>
  </p>
</div>

渲染效果：

案例

<style>
  /* 选择 class="box" 的元素之内的 span 元素 */
  .box span {
    color: red;
  }
</style>

<div class="box">
  <p>
    <span>span标签 </span>
  </p>
  <span>span标签 </span>
</div>

渲染效果：

# 2、子代选择器

TIP

子元素选择器之间用 > 连接
选中元素的直接后代（直接儿子）元素

语法：

选择器1 > 选择器2 {
}

/* 选择 div 标签里面子元素是 span 的标签 */
div > span {
}
.box > p {
}

案例

<style>
  .box > p {
    color: red;
  }
</style>
<body>
  <div class="box">
    <p>box p</p>
    <div class="item">
      <p>box item p</p>
    </div>
    <p>box p</p>
  </div>
</body>

渲染效果：

# 3、相邻兄弟选择器

TIP

+ 号组合两个选择器，当第二个元素紧跟在第一个元素之后，并且两个元素都属于同一个父元素的子元素，则第二个元素将被选中
a + b 即选择紧跟在 a 后面的第一个兄弟 b，a b 共属同一个父节点

语法：

元素1 + 元素2 {
}

/* 选中 h3 标签后紧跟的第一个兄弟 p 元素 */
h3 + p {
}

案例：

<style>
  /* 选中 h3 标签后紧跟的第一个兄弟 p 元素 */
  h3 + p {
    color: red;
  }
</style>
<body>
  <h3>h3标签</h3>
  <p>第一个p</p>
  <p>第二个p</p>
</body>

渲染效果：

案例

<style>
  h3 + p {
    color: red;
  }
</style>
<body>
  <h3>h3标签</h3>
  <span></span>
  <p>第一个p，但不是紧跟在h3后面，所以没有选中</p>
</body>

渲染效果：

# 4、后续兄弟选择器

TIP

后续兄弟选择器，位置无须紧邻，只须同层级
div~p 选择 div 元素之后所有同层级p元素。

语法

选择器1 ~ 选择器2 {
}

div ~ p {
} /* 选择 div 标签 之后的所有兄弟 p 元素 */

案例

<style>
  /* 选择 h3 标签 之后的所有兄弟 p 元素 */
  h3 ~ p {
    color: red;
  }
</style>
<body>
  <h3>h3</h3>
  <p>第一个p</p>
  <div class="box">
    <p>box中p</p>
  </div>
  <p>第二个p</p>
</body>

渲染效果：

# 三、伪类选择器

TIP

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态

# 1、a 伪类选择器

TIP

超链接有四个特殊状态，分别对应不同的伪类选择器

伪类	描述
`a:link`	没有被访问的超级链接
`a:visited`	已经被访问过的超级链接
`a:hover`	正被鼠标悬停的超级链接
`a:active`	正被激活的超级链接（按下按键，但还没有松开按键）

爱恨准则

a 标签的伪类书写，按照 “爱恨准则” 的顺序，否则会与伪类不生效。

按照 LOVE HATE（LVHA）的顺序声明 :link － :visited － :hover － :active

<style>
  /* 
    顺序不能乱 ，爱恨准则 LOVE HATE
    :link  -> :visited -> :hover -> :active   
    */
  a:link {
    color: red;
  }
  a:visited {
    color: blue;
  }
  a:hover {
    color: green;
  }
  a:active {
    color: yellow;
  }
</style>
<body>
  <p><a href="https://www.icodingedu.com">艾编程</a></p>
  <p><a href="https://baidu.com">百度一下，你就知道 ！</a></p>
</body>

注意事项：

遵守了 “爱恨原则” ，但 a:link 不生效，是因为之前访问过的网址会被浏览器记录，就会显示 a:visited 的样式（修改网址或清楚浏览记录即可）
四个样式可以根据实际情况单独使用
伪类:hover 不仅可以用在 a 标签上，还可以用在其他标签上，比如：div、p、列表标签，标题标签等等

:hover 在其它标签上的应用

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  /*鼠标滑动到div，背景变为skyblue*/
  div:hover {
    background: skyblue;
  }
  /*鼠标滑动到div上时，div里面的p标签隐藏*/
  div:hover p {
    display: none; /*隐藏p标签*/
  }
</style>
<body>
  <div>
    <p>p标签内容</p>
  </div>
</body>

渲染效果：

GIF 2022-07-08 22-11-05

应用场景

常用来实现鼠标移入动画，往后我们会大量使用他。

# 2、:focus 获取焦点

TIP

:focus 表示获得焦点的元素（如表单输入）。

当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发

<style>
  /*输入框获取焦点后，文字变红，背景颜色变黄色*/
  input.user:focus {
    color: red;
    background-color: yellow;
  }
</style>
<body>
  <input type="text" class="user" value="获取焦点，我变成红字黄底" />
</body>

渲染效果：

GIF 2022-07-08 22-18-51

# 3、:checked 被选中

TIP

:checked 选择器表示任何处于选中状态的
radio (<input type="radio">)
checkbox (<input type="checkbox">)
或 select 元素中的 option HTML 元素 ("option")

<style>
  input:checked {
    box-shadow: 0px 0px 4px red; /*添加阴影效果*/
  }
  input:checked + div {
    display: none; /*隐藏元素*/
  }
  div {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
</style>
<body>
  <input type="checkbox" />用户
  <div></div>
</body>

渲染效果：

GIF 2022-07-08 23-31-00

具体案例应 - 制作单选开关，在后面的案例中会讲

# 四、伪元素选择器

TIP

深入浅出伪元素选择器，带你轻松掌握 CSS 的高级用法。

# 1、::after（:after) 与 ::before (:before)

TIP

::before 创建一个 伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素
::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合**content**属性来为该元素添加装饰内容。此元素默认是行内元素。

语法：

element:after {
  ....样式声明...;
} /* CSS2 语法 */
element::after {
  ....样式声明...;
} /* CSS3 语法 */

element:before {
  ....样式声明...;
} /* CSS2 语法 */
element::before {
  ....样式声明...;
} /* CSS3 语法 */

TIP

CSS3 引入 ::before 和::after是为了将伪类和伪元素区别开来

案例

<style>
  .box p::before {
    content: "前"; /*content属性必加，即时内容为空*/
    width: 30px;
    height: 30px;
    background-color: skyblue;
    display: inline-block;
  }
  .box p::after {
    content: "后"; /*content属性必加，即时内容为空*/
    width: 30px;
    height: 30px;
    background-color: pink;
    display: inline-block;
  }
</style>
<body>
  <div class="box">
    <p>..这是内容区..</p>
  </div>
</body>

渲染效果：

重点提示

::after 与 ::before 中的 content:'' 属性必写，即使内容为空也要写。

应用场景：

伪元素一般应用于创建不需要添加任何内容的元素，这个元素只是用来做样式修饰效果。比如制作黑色半透明遮罩层、箭头、三角形、圆形、光影等效果。

后面我们会在大量的案例中应用到他。

# 2、::placeholder

TIP

::placeholder 可以选择一个表单元素的 占位文本，它允许开发者和设计师自定义 占位文本 的样式

<style>
  input {
    height: 50px;
    width: 300px;
    border: 0;
    outline: none;
    padding-left: 10px;
    background-color: rgb(252, 237, 240);
  }
  /*请输入用户名的字体大小为16px 同时颜色变为红色*/
  input.user::placeholder {
    font-size: 16px;
    color: red;
  }
</style>
<body>
  <p><input class="user" placeholder="请输入用户名" /></p>
  <p><input class="pwd" placeholder="请输入密码" /></p>
</body>

渲染效果：

# 五、属性选择器

属性选择器	描述	举例
`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>

渲染效果：

# 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>

渲染效果：

# 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="icon-close">icon-close</span>
  <span class="icon button">icon button</span>
  <span class="icons">icons</span>
</body>

渲染效果：

# 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>

渲染效果：

# 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>

渲染效果：

# 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>

渲染效果：

# 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>

渲染效果：

注：

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

# 六、序号选择器

TIP

更多选择器，查阅官方资料地址 (opens new window)

选择器	说明
`: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>
  /* 选中.box的第一个子元素 */
  .box :first-child {
    background-color: skyblue;
  }
  /* 选中.box的最后一个子元素 */
  .box :last-child {
    background-color: pink;
  }
</style>
<body>
  <div class="box">
    <p>1p</p>
    <h3>2h3</h3>
    <div>3div</div>
    <div>4div</div>
  </div>
</body>

渲染效果：

注意区分

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

<style>
  /* 选中.box的第一个子元素，并且子元素要是div标签 */
  .box div:first-child {
    background-color: skyblue;
  }
  /* 选中.box的最后一个子元素，并且子元素要是div标签 */
  .box div:last-child {
    background-color: pink;
  }
</style>
<body>
  <div class="box">
    <p>1p</p>
    <h3>2h3</h3>
    <div>3div</div>
    <div>4div</div>
  </div>
</body>

渲染效果：

# 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>
  /* 选中第2个个子元素 */
  .box :nth-child(2) {
    border: 2px solid blue;
  }
  /* 选中倒数第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>

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

<style>
  /* 选中第2个元素，并且第二个子元素要是div标签 */
  .box div:nth-child(2) {
    border: 2px solid blue;
  }
  /* 选中第2个元素子元素，子元素可以是任何标签 */
  .box :nth-child(2) {
    background-color: yellow;
  }
  /* 选中倒数第2个子元素，并且子元素要是div标签 */
  .box div:nth-last-child(2) {
    background-color: red;
  }
</style>
<body>
  <div class="box">
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <p>3</p>
  </div>
</body>

渲染效果：

# 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>

渲染效果：

# 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>

渲染效果：

# 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>

渲染效果：

# 七、其它选择器

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>

渲染效果：

# 2、:root 选择器

TIP

选择文档的 html 根元素

语法：

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

<style>
  :root {
    color: red;
    font-size: 40px;
  }
</style>
<body>
  艾编程
</body>

渲染效果：

# 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>

渲染效果：

# 八、案例

TIP

实践应用案例，加深理解

# 1、CSS 开关按扭

核心知识：

::checked 选择器
<label>标签应用
后续兄弟选择器
::after 伪元素选择器

<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>

<body>
  <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>
</body>

# 2、鼠标滑动按扭效果

核心知识：

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

原始效果	鼠标悬停效果

<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>

# 九、作业

TIP

CSS 高级选择器，实践作业。认真完成，加深理解，快速提高。

# 1、小米官网左侧菜单

小米官网左侧菜单

点击查看完整版视频讲解

# 2、精美的 Tab 选项卡菜单（CSS 精灵图）

精美的Tab选项卡菜单

点击查看完整版视频讲解

← CSS display 属性、背景属性、其他常用属性 CSS 三大特性：继承、层叠性、优先级 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# CSS 高级（复合）选择器

# 一、交集 与 并集 选择器

# 1、交集选择器

# 2、并集（分组）选择器

# 3、样式初始化

# 二、关系选择器

# 1、后代选择器

# 2、子代选择器

# 3、相邻兄弟选择器

# 4、后续兄弟选择器

# 三、伪类选择器

# 1、a 伪类选择器

# 2、:focus 获取焦点

# 3、:checked 被选中

# 四、伪元素选择器

# 1、::after（:after) 与 ::before (:before)

# 2、::placeholder

# 五、属性选择器

# 1、E[attr] 选择器

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

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

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

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

# 6、E[attr*="value"]

# 7、E[attr |='value']

# 六、序号选择器

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

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

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

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

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

# 七、其它选择器

# 1、only-child 选择器

# 2、:root 选择器

# 3、:empty 选择器

# 八、案例

# 1、CSS 开关按扭

# 2、鼠标滑动按扭效果

# 九、作业

# 1、小米官网左侧菜单

# 2、精美的 Tab 选项卡菜单（CSS 精灵图）

# 一、交集与并集选择器