CSS复合选择器的具体使用方法

时间：2021-05-08

交集选择器

交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 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] { color: #F6F;}a[href][title]{ font-size: 36px;}img[alt] { border: 3px #f00 solid;}p[align="center"] { 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复合选择器内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章