首页 » CSS » CSS父子级选择器

CSS父子级选择器

原文 http://blog.csdn.net/qq_36785111/article/details/78843146

2017-12-20 02:00:14阅读(568)

我们在给页面中的标签添加样式时,很多时候会用到父标签来设置子标签中的样式;
在这个时候,没有深入理解CSS的程序媛们就不知如何是好了!

今天专门请教前端大牛帮我缕清楚了父子级选择器的使用。

先来一段代码:

<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        border:5px solid black;
    }
    .a,.b{
        width: 100px;
        height: 100px;
        border: 5px solid black;
        box-sizing: border-box;
    }
    .c,.d{
        width: 50px;
        height: 50px;
        border: 5px solid black;
        box-sizing: border-box;
    }
    /*以下为三者为我此次要重点解说的*/
    /* NO1. */
    .box,.box>:not(.a){
        border-color: red;
    }
    /* NO2. */
    .box :not(.a){
        border-color: red;
    }
    /* NO3. */
    .box,.box:not(.a){
        border-color: red;
    }
    /*需解说代码结束*/
</style>
<div class="box">
    <div class="a">
        <div class="c">
        </div>
    </div>
    <div class="b">
        <div class="d">
        </div>
    </div>
</div>

我不执行代码中用注释括起来的,运行结果如下:
CSS父子级选择器

NO1.的执行结果
CSS父子级选择器

NO2.的执行结果
CSS父子级选择器 NO3.的执行结果
CSS父子级选择器

由上边的代码的运行结果可以看出:

1、.box,.box>:not(.a) 指:设置box标签及box儿子标签中不包含class为a的标签
2、.box :not(.a)指:设置box标签及box中不包含class为a的所有子标签(此处包括儿子,孙子标签)
(注意:.box后边有一个空格)

3、.box,.box:not(.a)指:设置box标签本身中不包含a的所有标签。如下代码片:

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

若使用.box,.box:not(.a)选择器设置样式则<div class="box a"></div>的样式不受影响

以上只简单介绍了在使用过程混淆的选择器的使用;
更多选择器的使用可以参考以下链接去查看API。CSS选择器参考手册

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹