CSS-子元素选择器

朱雀 2023-07-01 06:25 88阅读 0赞

说明：  
  
1.子元素选择器，只能选择作为某元素的子元素。  
2.子选择器使用：大于号">",进行分割

<html>
    <head>
        <style>
        .div1 .div1-1 .div1-1-p{
            color: red;
        }
    
        .div2 .div2-1 > .div2-1-p{
            color: blue;
        }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div1-1">
                <p class="div1-1-p">包含选择器,div1-1-p是div1-1的子级,    可以渲染</p>
                <div>
                    <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    可以渲染</p>
                </div>
            </div>
        </div>
    
        <div class="div2">
            <div class="div2-1">
                <p class="div2-1-p">包含选择器2, div1-1-p是div1-1的子级    可以渲染</p>
                <div>
                    <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    不不不可以渲染</p>
                </div>
            </div>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200319190100578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，88人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS-子元素选择器

说明： 1.子元素选择器，只能选择作为某元素的子元素。 2.子选择器使用：大于号">",进行分割 <html> <head>

朱雀/ 2023年07月01日 06:25/ 0 赞/ 89 阅读

相关 css基础知识2-元素选择器、id选择器、类选择器

css里面有很多选择器，这次就是为大家介绍一下css里面基本的几个选择器元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器

谁借莪１个温暖的怀抱￠/ 2022年12月22日 09:41/ 0 赞/ 183 阅读

相关 CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~

群组选择器（','） / 表示既h1，又h2 / h1, h2 { color: red; } 后代选择器\[空格\]

╰半橙微兮°/ 2022年12月19日 08:52/ 0 赞/ 212 阅读

相关 html 子类选择器,详解如何使用CSS选择所有子元素

如何使用CSS递归选择所有子元素？下面本篇文章就来给大家介绍一下使用CSS递归选择所有子元素的方法，希望对大家有所帮助。当元素是某个元素的子元素时，可以使用子选择器匹配，该

╰半夏微凉°/ 2022年10月06日 03:55/ 0 赞/ 257 阅读

相关 > 子元素选择器（Child selector）

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为 <div>元素子元

╰+攻爆jí腚メ/ 2022年09月30日 09:46/ 0 赞/ 146 阅读

相关 CSS3——元素选择器

一新增属性选择器 attval attval

布满荆棘的人生/ 2022年07月18日 18:30/ 0 赞/ 184 阅读

相关 jquery子元素过滤选择器，

1.1．子元素过滤选择器根据子元素顺序来获取。：nth-child（序号）；根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置也

柔情只为你懂/ 2022年06月06日 06:25/ 0 赞/ 204 阅读

相关 css各种选择器，元素标签选择器，类选择器，id选择器，选择器的组合

3 元素（标签）选择器：格式标签名（html元素）\{ /\CSS样式代码\/ \} 使用范围，是将同样的样式，作用在多个同名的标签上。 4 类选择器： <

曾经终败给现在/ 2022年06月06日 03:06/ 0 赞/ 241 阅读

相关 CSS伪元素选择器

伪元素选择器 < !–隐藏标签–> 每个标签都有开始：before 结束：after <p> <before> </before> < !--默

水深无声/ 2022年04月03日 12:13/ 0 赞/ 308 阅读

相关 CSS 子元素选择器

所有选择器参考手册：http://www.w3school.com.cn/cssref/css\_selectors.asp 1）子元素选择器参考链接：http:

「爱情、让人受尽委屈。」/ 2022年01月09日 05:29/ 0 赞/ 222 阅读