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

网页制作 2024/12/28 佚名

3 1 2

清风细雨楼 Design By www.eepep.com

交集选择器

交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 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,复合选择器

清风细雨楼 Design By www.eepep.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

清风细雨楼 Design By www.eepep.com

评论“CSS复合选择器的具体使用方法”

暂无评论...

www.eepep.com 清风细雨楼

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

交集选择器

并集选择器

后代选择器

子元素选择器

相邻兄弟选择器

属性选择器

CSS让子元素div的高度填满父容器的剩余空间的方法

纯css和flutter分别实现呼吸灯效果(实例代码)

评论“CSS复合选择器的具体使用方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

交集选择器

并集选择器

后代选择器

子元素选择器

相邻兄弟选择器

属性选择器

CSS让子元素div的高度填满父容器的剩余空间的方法

纯css和flutter分别实现呼吸灯效果(实例代码)

评论“CSS复合选择器的具体使用方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存