网页制作

CSS复合选择器的具体使用方法
网页制作 2024/12/23 佚名
3 2

交集选择器

交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 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,复合选择器
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

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

暂无“CSS复合选择器的具体使用方法”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com