css样式基础之选择器的总结

最新推荐文章于 2022-06-26 10:02:47 发布

阿忆流水笔记

最新推荐文章于 2022-06-26 10:02:47 发布

阅读量318

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u011006044/article/details/52459420

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

其实css的样式内容挺简单，但是用好却没那么容易。还是一点点积累知识吧，脑袋里有一定量的知识，也许就能够让自己提升一个等级了。不多说，今天总结一下css的选择器的知识。

选择器的优先级：
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
选择器的种类：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li:nth-child)

前面其中选择器，我想大家都比较熟，这里我就重点总结一下8和9。

看代码：

<body>
    <header>
        <nav>
            <p>标题1</p>
            <p class="bt2">标题2</p>
            <p>标题3</p>
        </nav>
    </header>
</body>

css的样式：

<style type="text/css">
    *{margin: 0;padding: 0;}
    nav p{display: inline-block;}
    .bt2{
        background: aqua;
        color: salmon;
    }
</style>

这个时候我们运行的结果为：
这里写图片描述

好要是运用我们的属性选择器，将标题2的颜色修改为红色：

*{margin: 0;padding: 0;}
nav p{display: inline-block;}
nav p[class="bt2"]{color: red;}
.bt2{
    background: aqua;color: salmon;
}

这样就ok了，这个属性选择器我比较少用，所以记录一下呗。

优先级的计算法则如下：
important的权重为1,0,0,0
ID的权重为0,1,0,0
类的权重为0,0,1,0
标签的权重为0,0,0,1
伪类的权重为0,0,1,0
属性的权重为0,0,1,0
伪对象的权重为0,0,0,1
通配符的权重为0,0,0,0
规则为：1在越前面，权重越大。