一、常见CSS选择器

【元素选择器】

1、通配选择器:*(匹配所有元素)

a、效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器

2、标签选择器:li(匹配标签为li的元素)

a、所有标签都能够当做选择器,比如body、h1、dl、ul、span等等

b、不管这个标签藏的多深,都能够被选择上

c、选择的是所有的,而不是某一个。所以是共性,而不是特性

3、ID选择器:#content(匹配ID属性值等于content的元素)

4、类选择器:.list(匹配class属性包含list的元素)

a、class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类

b、同一个标签可以同时携带多个类,多个类用空格隔开,多个样式有冲突的,以css中后出现的为准

c、不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式

d、每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用

【关系选择器】

1、后代选择器:#content h3(匹配ID为content的元素内所有的h3元素)

a、空格就表示后代,强调一下:选择的是后代,不一定是儿子

b、当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器

2、子元素选择器:#content>h3(匹配ID为content的元素子级的h3元素)

3、交集选择器:h3.content(匹配class为content的h3元素)

a、交集选择器没有空格

b、交集选择器可以连续交(一般不要这么写)

c、交集选择器,我们一般都是以标签名开头,比如div.haha  比如p.special

4、并集选择器(分组选择器):h1,h2(匹配所有的h1和h2元素)

5、相邻选择器:h1+h2(匹配 h1 元素之后紧跟的 h2 元素)

6、兄弟选择器:h1~h2(匹配 h1 元素之后所有的 h2 元素)

【属性选择器】

1、a[class]:匹配具有 class 属性值的 a 的元素

2、a[target="_blank"]:匹配 target 属性值等于 _blank 的 a 元素

3、a[href^="https"]:匹配 href 属性值以 https 开头的 a 元素

4、a[href$=".jpg"]:匹配 href 属性值以 .jpg 结尾的 a 元素

5、a[href*="baike"]:匹配 href 属性值包含 baike 的 a 元素

6、a[class~="abc"]:匹配 class 属性值以空格为分隔符,其中有一个等于 abc 的 a 元素

伪类选择器和伪元素选择器使用频率不高,本文暂不说明,详细示例可参考:https://www.haorooms.com/tools/css_selecter/

二、CSS选择器权重和优先级

共分为5个等级 :

第1等:提升指定样式规则的应用优先权,如:color:red !important,权值为10000(不建议使用)

第2等:代表内联样式,如: style="xxx",权值为1000

第3等:代表ID选择器,如:#content,权值为100

第4等:代表类,伪类和属性选择器,如.content,:hover,[attribute],权值为10

第5等:代表元素选择器和伪元素选择器,如div,p,权值为1

通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0

三、CSS选择器权重计算

1、元素被两个css样式选中,选择权重大的样式,如果权重一样,以css中后出现的为准

2、元素没有被css样式选中,要显示继承的样式时,使用就近原则

2、继承的样式权重为0(color、 text-开头的、line-开头的、font-开头的样式都可以继承)

判断一块内容的样式是什么?按照以下步骤:

HTML代码:

<div id="content">
<div id="main-content">
<h2>CSS简介</h2>
<p>CSS是一组格式设置规则,用于控制Web页面的外观。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的优点</h2>
<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版</p>
</div>
</div>
</div>

CSS代码:

/* 100(#main-content) + 10(class="paragraph") + 1(h2) = 111 */
#main-content [class="paragraph"] h2 {
color:yellow;
} /* 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) = 112 */
#main-content div.paragraph h2 {
color:orange;
} /* 1(body) + 100(#content) + 1(div) + 10([id="main-content"]) + 1(h2) = 113 */
body #content div[id="main-content"] h2 {
color:green;
} /* 1(div) + 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) + 10(.first) = 123 */
div#main-content div.paragraph h2.first {
color:pink;
} /* 100(#content) + 100(#main-content) + 1(h2) = 201 */
#content #main-content>h2 {
color:blue
} /* 100(#content) + 1(div) + 100(#main-content) + 1(h2) = 202 */
#content div#main-content h2{
color:red;
}

试一试

  

  

常见CSS选择器的权重和优先级的更多相关文章

  1. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  2. css选择器的分类及优先级计算方法总结

    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  3. css选择器万年不变的优先级和权重

    我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...

  4. css选择器有哪些,选择器的权重的优先级

    选择器类型 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first-l ...

  5. CSS选择器的权重与优先规则

    权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.   原文:http://w ...

  6. CSS选择器及其权重

    #转载请留言联系 1.标签选择器 标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中.举例: div{color:red} ...... <div>这是第一个di ...

  7. HTML选择器的权重(优先级)

    选择器的优先级主要用于样式发生冲突的情况下 选择器范围越小,优先级越高 行内样式>id选择器>类选择器>标签选择器>通用选择器 这里涉及一个权重值的问题,权重值越高,优先级越大 ...

  8. css选择器的权重

    权重会叠加!

  9. CSS选择器的权重与优先规

    我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...

随机推荐

  1. NO.1 MSP-ESP432P4111开箱

    本人准备2020TI杯模拟电子邀请赛,预计参赛可能会使用TI平台,故从某宝购置一块MSP-ESP432P4111 LaunchPad为参赛做准备.TI官网40美刀,但我只能找国内二道贩子买,有点小贵& ...

  2. Java中的集合(三)继承Collection的Queue接口

    Java中的集合(三)继承Collection的Queue接口 一.Queue介绍 Queue接口继承自Collection接口,是Java中定义的一种队列数据结构,元素是有序的(按插入顺序排序),先 ...

  3. windows核心编程课程实践---多线程文件搜索器(MFC界面)

    课上完了连老师见都没见一面QAQ....记录一下该小项目 效果如下: 1.实现文件搜索功能,并封装为类 1)首先是文件搜索类Rapidfinder的构造函数和析构函数和文件信息初始化函数和文件路径规格 ...

  4. Eclipse中常用快捷键的使用

    1.补全代码的声明:alt + / 2.快速修复: ctrl + 1 3.批量导包:ctrl + shift + o 4.使用单行注释:ctrl + / 5.使用多行注释: ctrl + shift ...

  5. 关于ubuntu下使用l2tpvpn和远程桌面windows系统的测试

    一.背景: 2019年9月下旬到10月上旬,到海南澄迈福山度假.随身带的笔记本电脑中windows10系统因硬盘故障挂了,在另一块硬盘上的ubuntu18.04系统正常.因媳妇需要在10月1日远程回公 ...

  6. java方法句柄-----2.方法句柄的获取、变换、特殊方法句柄

    目录 1.获取方法句柄 1.1查找构造方法.一般方法和静态方法的方法句柄 1.2 查找类中的特殊方法(类中的私有方法) 1.3 查找类中静态域和一般域 1.4 通过反射API得到的Constructo ...

  7. Java 第十一届 蓝桥杯 省模拟赛 螺旋矩阵

    螺旋矩阵 题目 问题描述 对于一个 n 行 m 列的表格,我们可以使用螺旋的方式给表格依次填上正整数,我们称填好的表格为一个螺旋矩阵. 例如,一个 4 行 5 列的螺旋矩阵如下: 1 2 3 4 5 ...

  8. (Java实现) 整数区间

    一.题目描述 给n个区间,形式为[a, b],a和b均为整数,且a < b. 求一个最小的整数点的集合,使得每个区间至少2个不同的元素(整数点)属于这个集合. 求这个集合的元素个数. 输入 第1 ...

  9. Java实现 LeetCode 363 矩形区域不超过 K 的最大数值和

    363. 矩形区域不超过 K 的最大数值和 给定一个非空二维矩阵 matrix 和一个整数 k,找到这个矩阵内部不大于 k 的最大矩形和. 示例: 输入: matrix = [[1,0,1],[0,- ...

  10. java实现Prim算法

    1 问题描述 何为Prim算法? 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex ...