CSS复合选择器

短命女 2022-12-31 12:24 216阅读 0赞

*  交集选择器
 *  并集选持器
 *  后代选择器
 *  子元素选择器
 *  相邻兄弟选择器
 *  属性选择器

#### 交集选择器 ####

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

> 结语：想学习前端的伙伴和正在学习前端的伙伴，都可以加入这边的前端裙：953352883，裙里从小白到大佬都有，前端学习资料，视频资料，面试题文档可以免费领取。