CSS学习笔记02——选择器进阶+背景属性+元素显示模式+三大特性

visionchyw

已于 2022-05-26 15:33:04 修改

阅读量105

点赞数 1

分类专栏： CSS 文章标签： css 学习 css3

于 2022-05-26 15:21:04 首次发布

本文链接：https://blog.csdn.net/visionchyw/article/details/124818116

版权

选择器进阶

复合选择器

后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 { css }
结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
•后代包括：儿子、孙子、重孙子……
•后代选择器中，选择器与选择器之前通过空格隔开

<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>Document</title>
    <style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器   后代选择器 {} */
        div p {
     
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代: 儿子, 孙子, 重孙子..... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>

</body></html>

效果如下：
在这里插入图片描述

子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
•子代只包括：儿子
•子代选择器中，选择器与选择器之前通过 > 隔开

<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>Document</title>
    <style>
        /* 空格隔开的是后代, 儿子,孙子,重孙子 */
        /* div a {
            color: red;
        } */

        /* 只想选中儿子a */
        /* div的儿子a文字颜色是红色 */
        div>a {
     
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>

</body></html>

效果如下：
在这里插入图片描述

并集选择器：,

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2 { css }
结果：找到选择器1 和选择器2 选中的标签，设置样式
注意点：
•并集选择器中的每组选择器之间通过 , 分隔
•并集选择器中的每组选择器可以是基础选择器或者复合选择器
•并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<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>Document</title>
    <style>
        /* p div span h1 文字颜色是红色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
     
            color: red;

最低0.47元/天解锁文章

visionchyw

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记02——选择器进阶+背景属性+元素显示模式+三大特性

选择器进阶复合选择器后代选择器：空格作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2 { css }结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式注意点：•后代包括：儿子、孙子、重孙子……•后代选择器中，选择器与选择器之前通过空格隔开<html lang="en"><head> <meta charset="UTF-8"> <me
复制链接

扫一扫