当前位置：首页 > news >正文

CSS的复合选择器

news 来源：原创 2025/5/14 18:58:33

CSS选择器是前端开发中非常重要的基础知识，而复合选择器则是其中功能强大且实用的部分。本文将详细介绍各种复合选择器的用法和应用场景，帮助您更高效地选择和控制页面元素。

1. 后代选择器（空格）

后代选择器通过空格连接两个选择器，用于选择嵌套在父元素内部的所有匹配子元素，不论嵌套层级有多深。

语法：祖先选择器后代选择器{}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>复合选择器</title><style>.container .box1-1 {width: 100px;height: 100px;background-color: #19ff32;color: #5440ff;}</style>
</head>
<body><div class="container"><!--作为container的亲儿子--><div class="box1-1">我是儿子</div><div class="box1"><!--做为container的孙子--><div class="box1-1">我是孙子<div class="box1-1"><!--做为container的孙孙-->我是孙孙子</div></div></div></div>
</body>
</html>

运行结果：

注意点：

1. 后代包括：⼉⼦、孙⼦、重孙⼦……

2. 后代选择器中，选择器与选择器之前通过空格隔开

2. 子代选择器（>）

子代选择器使用>符号，只选择直接子元素，不会选择更深层级的元素。

语法：子代选择器:亲父亲选择器>亲儿子选择器{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子代选择器</title><style>.container>.box1{width: 100px;height: 100px;background-color: #19ff32;}</style>
</head>
<body><div class="container"><!--作为container的亲儿子--><div class="box1">我是儿子</div><div class="box1-1"><!--做为container的孙子--><div class="box1">我是孙子<div class="box1"><!--做为container的孙孙-->我是孙孙子</div></div></div></div>
</body>
</html>

注意点：

1. ⼦代只包括：⼉⼦

2. ⼦代选择器中，选择器与选择器之前通过 > 隔开

3. 并集选择器（,）

并集选择器可以同时选择多个元素，为它们设置相同的样式。

语法：并集选择器：选择器1，选择器2....{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器</title><style>h1,div p, .outer{width:100px;height:100px;background-color: red;}</style>
</head>
<body><h1>我是大标题</h1><h2>我是小标题</h2><p class="outer">我是盒子外部的段落！！！</p><div><p class="inner">我是盒子内部的段落！！！</p></div>
</body>
</html>

注意点：

1. 并集选择器中的每组选择器之间通过 , 分隔

2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器

3. 并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性

4.交集选择器

交集选择器可以通过对元素的类名和id名以及标签名字，对元素进行精准定位，为它们设置样式。

语法：交集选择器:标签名称.选择器名称{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交集选择器</title><style>/*给类名为boxid名为one的元素设置属性*/.box#one {width: 100px;height: 100px;background-color: red;}/*给标签为h2id名为three的元素设置属性*/h2#three{width: 100px;height: 100px;background-color: blueviolet;}</style>
</head>
<body><div class="box"><div class="box" id="one">111</div><h2 class="box" id="two">222</h2><h2 class="box" id="three">222</h2><p class="box" id="four">333</p></div>
</body>
</html>

运行结果：

5.伪类结构选择器：hover{}

伪类结构主要是用来制作鼠标悬停的时候的动态效果。

语法：伪类选择器：hover{}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类结构选择器</title><style>h1:hover{color: red;}.outer:hover{background-color: #ef96c2;}a:hover{color: #0be4d5;}</style>
</head>
<body><h1>我是大标题</h1><p class="outer">伪类结构主要是用来制作鼠标悬停的时候的动态效果。</p><div><a href="http://www.baidu.com">百度一下</a></div>
</body>
</html>

运行结果：