CSS复合选择器

林的快手

于 2025-02-19 20:23:32 发布

阅读量1.1k

点赞数 20

分类专栏： HTML+CSS 文章标签： css 前端 javascript java 算法数据库 leetcode

本文链接：https://blog.youkuaiyun.com/weixin_65752158/article/details/145737370

版权

HTML+CSS 专栏收录该内容

20 篇文章

订阅专栏

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。

1 .交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即......又...... 的意思），例如：年轻且长得帅

语法：选择器1选择器2选择器3...选择器n {}

举例：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>

    <style>
        /* p标签并且类名为text的 */
        p.text{
            color: aqua;
        }
    /* 类名为beauty的 */
        p.beauty{
            color: red;
        }
        /* 类名为ff和xxx的 */
        .ff.xxx{
            color: chartreuse;
        }

        
    </style>

</head>

<body>
    <p class="text" >学习css最重要的是坚持</p>
    <p  class="beauty">学习web后端最重要的是仔细</p>
    <p class="ff xxx" >这样才能找到工作</p>
</body>

</html>

注意：

1. 有标签名，标签名必须写在前面。

2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没 有意义。

3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元 素。

4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

2. 并集选择器

作用：选中多个选择器对应的元素，又称： 分组选择器 。

所谓并集就是或者的含义（通俗理解：要么 ...... 要么 ...... 的意思），例如：给我转 10 万块钱

或者我报警。

语法：选择器 1 , 选择器 2, 选择器 3 , ... 选择器 n {}

多个选择器通过 , 连接，此处 , 的含义就是：或。

举例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>

    <style>
      
          /* 选中类名为*/
        .text,
        .beauty,
        #ff{
            font-size: 24px;
            background-color: hotpink;
            width: 200px;

        }
        
    </style>

</head>

<body>
    <p class="text">学习css最重要的是坚持</p>
    <p  class="beauty">学习web后端最重要的是仔细</p>
    <p id="ff">这样才能找到工作</p>
</body>

</html>

3.HTML元素间的关系

很显然h1和ul的父元素就是div

li的父元素是hl

很显然h1，ul是div的儿子

li是ul的儿子

备注：父元素，也算是祖先元素的一种。

例如：张三的父亲，也算是张三的祖先，但一般还是称呼：父亲。

span的祖先是ul，h1，div

li的祖先是div

li就是div的后代，儿子的儿子

span就是div和ul的后代

h1和ul就是兄弟

li和li之间也是兄弟

4. 后代选择器

作用：选中指定元素中，符合要求的后代元素。

语法：选择器 1 选择器 2 选择器 3 ...... 选择器 n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器。

举例：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>

    <style>
        /* ul中的li */
        ul li {
            color: blue;
            font-size: 20px;
        }

        /* div中的ol */
        div ol {
            color: red;
            background-color: green;
        }

        li a {
            color: aqua;
        }

        ol li a {
            color: brown;
        }
 
        .subject li{
            background-color:goldenrod ;
        }

       ol  div{
       font-size: 100px;
       }

    </style>

</head>

<body>
    <div>
        <ul>
            <li>抽烟</li>
            <li>喝酒</li>
            <li>打牌</li>
            <li>
                <a href="#">烫头</a>
            </li>
        </ul>
        <hr>
        <ol>
            <li>张三</li>
            <li>李四</li>
            <li>
                <a href="#">王五</a>
            </li>
        </ol>
    </div>

    <hr>
    <ol class="subject">
        <li class="front-end">前端</li>
        <div class="front-end">学科介绍：学好前端，挂帅杨帆！</div>
        <li>Java</li>
        <li>大数据</li>
        <li>UI</li>
    </ol>
</body>

</html>

注意：

1. 后代选择器，最终选择的是后代，不选中祖先。

2. 儿子、孙子、重孙子，都算是后代。

3. 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

5.子代选择器

作用：选中指定元素中，符合要求的子元素（ 儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器

语法：选择器 1 > 选择器 2 > 选择器 3 > ...... 选择器 n {}

选择器之间，用 > 隔开， > 可以理解为： " xxx 的子代 " ，其实就是儿子的意思。

选择器 1234....n ，可以是我们之前学的任何一种选择器

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>

    <style>
        /* div下的儿子 */
        div>a{
            color: greenyellow;
            font-size: 39px;
        }
        /* div > p > a{
            color: red;
            font-size: 100px;
        } */
        #hh > a{
            color: palevioletred;
            font-size: 50px;
            background-color: blueviolet;
        }
        
    </style>

</head>

<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>

        <p>
            <a href="#">赵六2</a>
        </p>
       <p>
        <a href="#">赵六</a>
        <div class="name">
            <a href="#">孙奇</a>
         <p id="hh"> 
            <a href="#">小子</a>
         </p>
        </div>
       </p>
            
    </div>

    
</body>

</html>

注意：

1. 子代选择器，最终选择的是子代，不是父级。

2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

6.兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的 相邻兄弟 元素

所谓相邻，就是 紧挨着 他的下一个，简记：睡在我下铺的兄弟

语法：选择器 1+ 选择器 2 {} 。

通用兄弟选择器：

作用：选中指定元素后，符合条件的 所有兄弟 元素。（简记：睡在我下铺的所有兄弟）

语法：选择器 1~ 选择器 2 {} 。

示例：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟选择器</title>

    <style>
          /* 选中div后紧紧相邻的兄弟p元素（睡在我下铺的兄弟）—— 
          相邻兄弟选择器  往下发展的的*/
          div + p{
            color: red;
          }
           /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟）—— 通用兄弟选择器 */
           div ~p{
            color: green;
           }
           ul li ~li{
            background-color: hotpink;
            font-size: 60px;
           }
          
       
    </style>

</head>

<body>
    
    <div>尚硅谷</div>
    <p>前端</p>
	<p>Java</p>
	<p>大数据</p>
	<p>UI</p>
    <ul>
        <li>主页</li>
        <li>秒杀</li>
        <li>订单</li>
        <li>我的</li>
    </ul>        

    
</body>

</html>

7.属性选择器

作用：选中属性值符合一定要求的元素。

语法：

1. [ 属性名 ] 选中具有某个属性的元素。

2. [ 属性名 =" 值 "] 选中包含某个属性，且属性值等于指定值的元素。

3. [ 属性名 ^=" 值 "] 选中包含某个属性，且属性值以指定的值开头的元素。

4. [ 属性名 $=" 值 "] 选中包含某个属性，且属性值以指定的值结尾的元素。

5. [ 属性名 *=“ 值 ”] 选择包含某个属性，属性值包含指定值的元素。

举例：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>

    <style>
        /* 1. [属性名] 选中具有某个属性的元素。 */
        /* [title]{
            color: red;
        } */
        /* 2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。 */
        /* [title="ithehima2"]{
            color: red;
        } */
        /* 3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。   */
        /* [title^=i]{
            color: red;
        } */

        /* 4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。 */
        /* [title$="2"]{
            color: brown;
        } *
         */
         /* 5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。 */
         [title*="h"]{
            background-color: red;
         }
       
    </style>

</head>

<body>
    
    <div title="ithehima1">尚硅谷</div>
    <p title="ithehima2">前端</p>
	<p title="ithehima3">Java</p>
	<p title="ithehima4">大数据</p>
      

    
</body>

</html>