36 CSS 复合选择器

最新推荐文章于 2023-07-21 14:50:16 发布

hello_sunny123

最新推荐文章于 2023-07-21 14:50:16 发布

阅读量109

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118556451

版权

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素(标签)

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。

一.后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素)。

例如：

ul li {样式声明}   /*选择 ul 里边所有的 li 标签元素*/

元素1 和元素2 中间用空格隔开

元素1 是父级,元素2 是子级,最终选择的是元素2

元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可

元素 1和元素2 可以是任意基础选择器

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之后代选择器</title>
    <style>
        /* 我想把ol里边的小li选出来改为 pink */
        ol li {
    
            color: pink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
    
            color: red;
        }

        .nav li a {
    
            color: green;
        }
    </style>
</head>

<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>
            <a href="#">我是孙子</a>
        </li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>
            <a href="#">不会变化的</a>
        </li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href=

最低0.47元/天解锁文章

hello_sunny123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
36 CSS 复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。一.后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代
复制链接

扫一扫