我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在实际工作中,网页的css里面常见的选择器就是#id.class,其它的选择器使用情况就非常少见了。当然,这主要是因为在这两个最基础的样式选择器就覆盖了绝大多数需求,其它的各种选择器就没有啥用武之地了。

苏南大叔:网页前端css,选择器写法大全,如何使用clearfix? - css选择器hero
网页前端css,选择器写法大全,如何使用clearfix?(图5-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔和计算机代码的故事。本文讲述几个不太常见的css选择器使用情况。本文测试环境:win10chrome@100.0.4896.60

:after

这个:after属性的典型应用就是传说中网页必备的clearfix。作用就是让盒子的高度自动被内部内容撑开,一般来说,有备无患。

<style>
    .clearfix:after {
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    .box{
        background: pink;
        padding: 10px;
        margin-bottom: 15px;
    }
    .main{
        float:left;
        width:300px;
        background:yellow;
        height: 150px;
    }
</style>
<div class="box clearfix">
    <div class="main">clearfix</div>
</div>
<div class="box">
    <div class="main">没有clearfix</div>
</div>

对于子元素.main,一旦使用了浮动属性,比如:float:left,那么父元素就失去了自动撑开的功能,需要clearfix来救场。

苏南大叔:网页前端css,选择器写法大全,如何使用clearfix? - clearfix的用法
网页前端css,选择器写法大全,如何使用clearfix?(图5-2)

这里还有个:after选择器的应用例子

子选择器(>)

这个和常见的不带(>)的选择器对比的话,这个(>)就是非常精确的选择到其第一层子节点。而不是范范的选择到所有后代节点。这个可以参考范例:

<style>
    .box{
        background: pink;
        padding: 10px;
        margin-bottom: 15px;
    }
    .main{
        padding: 10px;
    }
    .box .main{
        background: blue;
    }
    .box > .main{
        background: green;
    }
</style>
<div class="box">
    <div class="main">
        <div class="main"></div>
    </div>
</div>

苏南大叔:网页前端css,选择器写法大全,如何使用clearfix? - 子选择器
网页前端css,选择器写法大全,如何使用clearfix?(图5-3)

相邻同胞选择器(+)

一般来说,css的选择器都是选择后代的,这个选择器不走寻常路。它是选择兄弟节点的,和当前节点同级的【相邻】节点。中间隔着个其它兄弟的话,这不叫相邻,也会失效。
参考范例:

<style>
    #a1 + .main{
        background: red;
    }
</style>
<div class="box">
    <div class="main" id="a1">0
        <div class="main">1</div>
    </div>
    <div class="main">2</div>
    <div class="main">3</div>
</div>

苏南大叔:网页前端css,选择器写法大全,如何使用clearfix? - 加号直接挨着的兄弟选择器
网页前端css,选择器写法大全,如何使用clearfix?(图5-4)

多class选择器

无论顺序,多个class中间没有空格,没有各种符号,就是这种情况。

<style>
    .b1.main{
        background: red;
    }
    .main.b2{
        background: yellow;
    }
    .c3.main.b3{
        background: blue;
    }
</style>
<div class="box">
    <div class="main">0
        <div class="main b1">1</div>
    </div>
    <div class="main b2">2</div>
    <div class="main b3 c3">3</div>
    <div class="main b2 c4">2</div>
</div>

苏南大叔:网页前端css,选择器写法大全,如何使用clearfix? - 多class选择器
网页前端css,选择器写法大全,如何使用clearfix?(图5-5)

相关文章

总结

css的写法那是非常的多,只要不做硬性要求,实现同一个效果可以有很多种方案。本文列出了一些不是太常见的选择器写法,更多高级应用,待日后补充。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css