CSS复合选择器有哪一些？如何使用？-群英

注册有礼

数据betway88w >

CSS复合选择器有哪一些？如何使用��

Admin 2021-04-16 群英技术资��

CSS复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的，目的就是为了能够选择更准确更精细的元素标签。CSS复合选择器包括交集选择器，并集选择器，后代选择器，子元素选择器，兄弟相邻选择器和属性选择器。那么css复合选择器怎么用呢？下面是各类css复合选择器的语法以及示例的介绍��

交集选择��

交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或�� ID 选择器，两个选择器之间必须连续写，不能有空格��
交集选择器选择的元素必须是由第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素的样式是三个选择器样式，即第一个选择��;

语法��

元素选择�� . 类选择器｜ #ID 选择�� { 
 属�� 1: 属性�� 1��
 属�� 2: 属性�� 2��
}

语法说明：“类选择器｜ ID 选择器”表示使用类选择器，或者使�� ID 选择器��

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用交集选择器设置样�� </title>
<style>
/* 元素选择器设置边框和下外边距样式 */
div { 
 border: 5px solid red;
 margin-bottom:20px;
}
/* 交集选择器设置背景颜�� */
div.txt { 
 background:#33FFCC;
}
/* 类选择器设置字体格�� */ 
.txt { 
 font-style:italic;
}
</style>
</head>
<body>
    <div> 元素选择器效�� </div>
    <div class="txt"> 交集选择器效�� </div>
    <span class="txt"> 类选择器效�� </p>
</body>
</html>

并集选择��

并集选择器也叫分组选择器或群组选择器，它是由两个或两个以上的任意选择器组成的，不同选择器之间用“，”隔开，实现对多个选择器进行“集体声明”��

并集选择器的特点是所设置的样式对并集选择器中的各个选择器都有效。并集选择器的作用是把不同选择器的相同样式抽取出来，然后放到一个地方作一次性定义，从而简化了 CSS 代码量��

语法��

选择�� 1,
选择�� 2,
选择�� 3,
 { 
     属�� 1: 属性�� 1��
     属�� 2: 属性�� 2��
}

语法说明：选择器的类型任意，既可以是基本选择器，也可以是一个复合选择器��

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用并集选择器设置样�� </title>
<style>
div {
    margin-bottom:10px;
    border:3px solid red;
}
span { 
    font-size:26px;
}
p { 
    font-style:italic;
}
/* 使用并集选择器设置元素的公共样式 */
span,
.p1,
#d1 { 
    background:#CCC;
}
</style>
</head>
<body>
     <div id="d1"> 这是 DIV1</div>
     <div> 这是 DIV2</div>
     <p class="p1"> 这是段落一 </p>
     <p> 这是段落�� </p>
     <span> 这是一�� SPAN</div>
</body>
</html>

后代选择��

后代选择器又称包含选择器，用于选择指定元素的后代元素。使用后代选择器可以帮助我们更快更确切地找到目标元素��

语法��

选择�� 1 选择�� 2 选择�� 3 { 
    属�� 1: 属性�� 1��
　属�� 2: 属性�� 2��
}

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用后代选择器设置样�� </title>
<style>
#box1 .p1 { /* 后代选择�� */
    background:#CCC;
}
#box2 p { /* 后代选择�� */
    background:#CFC;
}
</style>
</head>
<body>
     <div id="box1">
         <p class="p1"> 段落一 </p>
         <p class="p2"> 段落�� </p>
     </div>
     <div id="box2">
         <p class="p1"> 段落�� </p>
         <p> 段落�� </p>
     </div>
     <p class="p1"> 段落�� </p>
     <p> 段落�� </p>
</body>
</html>

子元素选择��

后代选择器可以选择某个元素指定类型的所有后代元素，如果只想选择某个元素的所有子元素，则需要使用子元素选择器��

语法��

选择�� 1> 选择�� 2 {
      属�� 1: 属性�� 1; 
      属�� 2: 属性�� 2;
}

语法说明：��>”称为左结合符，在其左右两边可以出现空格，“选择�� 1> 选择�� 2”的含意为“选择作为选择�� 1 指定元素的所有选择�� 2 指定的子元素��.

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 子元素选择器应用示�� </title>
<style>
h1>span {
    color:red;
}
</style>
</head>
<body>
    <h1> 这是非常非常 <span> 重要 </span> �� <span> 关键 </span> 的一步��</h1>
    <h1> 这是真的非常 <em><span> 重要 </span> �� <span> 关键 </span></em> 的一步��</h1>
</body>
</html>

相邻兄弟选择��

如果需要选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器��

语法:

选择�� 1+ 选择�� 2 {
     属�� 1: 属性�� 1; 
     属�� 2: 属性�� 2;
}

��:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 相邻兄弟选择器应用示�� </title>
<style>
h1+p {
     color:red;
     font-weight:bold;
     margin-top:50px;
}
p+p{
     color:blue;
     text-decoration:underline;
}
</style>
</head>
<body>
     <h1> 这是一个一级标�� </h1>
     <p> 这是段落 1��</p>
     <p> 这是段落 2��</p>
     <p> 这是段落 3��</p>
</body>
</html>

属性选择��

�� CSS 中，我们还可以根据元素的属性及属性值来选择元素，此时用到的选择器称为属性选择器。属性选择器的使用主要�� 2 种形式，

语法:

属性选择�� 1 属性选择�� 2...{
     属�� 1: 属性�� 1;
     属�� 2: 属性�� 2;
}

元素选择器属性选择�� 1 属性选择�� 2... {
     属�� 1: 属性�� 1;
     属�� 2: 属性�� 2;
}

语法说明：属性选择器的写法�� [ 属性表达式 ]，其中属性表达式可以是一个属性名，也可以是“属性＝属性值”等这样的表达式.

属性选择器的应用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 属性选择器的应用 </title
<style>
[title] {/* 选择具有 title 属性的元素 */
     color: #F6F;
}
a[href][title]{/* 选择同时具有 href �� title 属性的 a 元素 */
     font-size: 36px;
}
img[alt] {/* 选择具有 alt 属性的 img 元素 */
     border: 3px #f00 solid;
}
p[align="center"] {/* 选择 align 属性等�� center �� p 元素 */
     color: red;
    font-weight: bolder;
}
</style>
</head>
<body>
     <h2> 应用属性选择器样式：</h2>
     <h3 title="Helloworld">Helloworld</h3>
     <a title=" 首页 "href="#"> 返首�� </a><br/><br/>
     <img src="miaov.jpg" alt="logo" />
     <p align="center"> 段落一 </p>
     <hr />
     <h2> 没有应用属性选择器样��
     <h3>Helloworld</h3>
     <a href="#"> 返首�� </a><br/><br/>
     <img src="miaov.jpg">
     <p align="right"> 段落�� </p>
</body>
</html>

以上就是关于css复合选择器怎么用的介绍，希望对大家学习和理解css复合选择器有帮助，更多css内容大家可以关注其他文章��

标签�� CSS复合选择��

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容��

下一篇：CSS实现带有搜索框的导航栏介��
上一篇：css实现自动换行介绍及对firefox自动换行探讨