CSS-子元素选择器

朱雀 2023-07-01 06:25 143阅读 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 条评论，143人围观）

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

相关阅读

相关如何通过CSS选择器选择一个元素的子元素？如何选择第一个子元素和最后一个子元素？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 选择一个元素的子元素 ⭐ 选择第一个子元素和最后一个子元素 ⭐ 注意事项 ⭐ 写在最后 ---

短命女/ 2023年10月14日 18:28/ 0 赞/ 45 阅读

相关复合选择器-子选择器（HTML、CSS）

复合选择器-子选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

曾经终败给现在/ 2023年10月03日 12:49/ 0 赞/ 26 阅读

相关 css伪类选择器(css伪元素选择器)

css选择器的使用怎么样算是规范呢？感觉公说公有理婆说婆有理? 这个主要是自己用着顺手，一般用id定义外围大框架，因为id优先级最高这样做不会出现框架问题，只要在调整框架

素颜马尾好姑娘i/ 2023年09月26日 13:10/ 0 赞/ 28 阅读

相关 CSS-子元素选择器

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

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

相关 jquery子元素选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

今天药忘吃喽~/ 2023年06月12日 06:20/ 0 赞/ 33 阅读

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

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

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

相关 CSS3——元素选择器

一新增属性选择器 attval attval

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

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

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

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

相关 CSS伪元素选择器

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

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

相关 CSS 子元素选择器

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

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