CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
网站制作、做网站的开发,更需要了解用户,从用户角度来建设网站,获得较好的用户体验。创新互联多年互联网经验,见的多,沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司,打造的就是网站建设产品直销的概念。选择创新互联,不只是建站,我们把建站作为产品,不断的更新、完善,让每位来访用户感受到浩方产品的价值服务。
1.基础选择器
a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。
HTML
CSS
执行效果:
b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。
HTML
CSS
执行效果:
c.元素选择器:通过note节点名称匹配元素。
HTML
CSS
2.属性选择器:
注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。
CSS3新增了一些属性选择器,待持续更新。
3.组合选择器
示例如下:
实现效果如下:
示例如下:
从高到低依次是:
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分,用0,0,0,0表示。
参考:
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然,从技术上讲, !important 与优先级无关,但它与最终的结果直接相关。使用 !important 是一个 坏习惯 ,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些经验法则:
什么的情况下可以使用 !important:
A) 覆盖内联样式
你的网站上有一个设定了全站样式的 CSS 文件,同时你(或是你同事)写了一些很差的内联样式。
全局的CSS文件会在全局范围内设置网站的外观,而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法,但是有时你可以在CSS文件里用!important去覆盖内联样式。
在这种情况下,你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。
当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。
CSS 的继承性
CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:
div
p/p/div
如果 div 有个属性 color: red,则这个属性将被 p 继承,即 p 也拥有属性 color: red。
由上可见,当网页比较复杂, HTML 结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。影响的规则是:
CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。
例1:
!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"
div style="color: blue"
div class="son"/div
/div/div
如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式",那么"直接样式"就是一个标签直接拥有的属性。又有如下规则:
CSS 优先规则2:"直接样式"比"祖先样式"优先级高。
例2:
!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"
div class="son" style="color: blue"/div/div
选择器的优先级
上面讨论了一个标签从祖先继承来的属性,现在讨论标签自有的属性。在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器:
ID 选择器, 如 #id{}
类选择器, 如 .class{}
属性选择器, 如 a[href="segmentfault.com"]{}
伪类选择器, 如 :hover{}
伪元素选择器, 如 ::before{}
标签选择器, 如 span{}
通配选择器, 如 *{}
CSS 优先规则3:优先级关系:内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器
例3:
// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {
color: red;}.content-class {
color: blue;}div {
color: grey;}
最终的 color 为 black,因为内联样式比其他选择器的优先级高。
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有 3 种:
后代选择符: .father .child{}
子选择符: .father .child{}
相邻选择符: .bro1 + .bro2{}
当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:
CSS 优先规则4:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
例4:
// HTMLdiv id="con-id"
span class="con-span"/span/div// CSS#con-id span {
color: red;}div .con-span {
color: blue;}
由规则 4 可见,span 的 color 为 red。
如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢?这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高,其实这仍然可以用规则 4 来解释。
例5:
// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {
background: blue;}/stylediv/div// style-link.cssdiv {
background: lime;}// style-import.cssdiv {
background: grey;}
从顺序上看,内部样式在最下面,被最晚引用,所以 div 的背景色为 blue。
上面代码中,@import 语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件,原因见另一篇博客:CSS 引入方式。
CSS 还提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。
CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。
例6:
// HTMLdiv class="father"
p class="son"/p/div// CSSp {
background: red !important;}.father .son {
background: blue;}
虽然 .father .son 拥有更高的权值,但选择器 p 中的 background 属性被插入了 !important, 所以 p 的 background 为 red。
错误的说法
在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。
1、最近的祖先样式比其他祖先样式优先级高。
2、"直接样式"比"祖先样式"优先级高。
首先,我们需要知道有哪些选择器:
1)ID 选择器, 如 #id{}
2)类选择器, 如 .class{}
3)属性选择器, 如 a[href="segmentfault.com"]{}
4)伪类选择器, 如 :hover{}
5)伪元素选择器, 如 ::before{}
6)标签选择器, 如 span{}
7)通配选择器, 如 *{}
3、内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器
4、当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
5、属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。
文章名称:css样式元素和类优先级,css四种样式的优先级
网站链接:https://www.cdcxhl.com/article2/dsiopoc.html
成都网站建设公司_创新互联,为您提供搜索引擎优化、网站设计、小程序开发、做网站、品牌网站建设、响应式网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联