AOA棋牌

专注搜索竞价代运营

成长之选 ,效果之道!

免费咨询热线:17636682598

CSS常用选择器权重优先级

今天我们来聊聊CSS常用选择器权重优先级,以下2个关于CSS常用选择器权重优先级的观点希望能帮助到您找到想要的资讯。

CSS常用选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,我们一起来看看吧!

一. 通配符选择器

通配符选择器常用' * '号表示,他是所有选择器里作用范围最广的,能匹配页面中所有的元素。

基本语法格式: *{属性:属性值;}

例子

使用该选择器定义样式,清除所有HTML标记的默认边距。

*{

margin:0;        /* 定义外边距 */

padding:0;       /* 定义内边距 */

}

但是在实际开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,反而降低了代码的执行速度。

二. 标签选择器

标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。

基本语法格式: 标签名{ 属性:属性值;}

所有的HTML标记名都可以作为标签选择器,例如:div, a, p, h1,span, 等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

三. 类选择器

类选择器使用‘ . ’(英文点号)进行标识,后面紧跟类名。

基本语法格式: .类名{ 属性:属性值;}

该语法中,类名为HTML元素的class属性值,大多数HTML元素都可以定义class属性。

类选择器最大的优点是可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,可以实现为不同类型的标记指定相同的样式。同时,一个HTML元素也可以应用多个class类,设置多个样式,此时多个类名之间需要用空格隔开,如上述代码中的两个

标记。

*注意: 类名的第一个字符不能以数字开头,并且严格区分大小写。

四. id选择器

id选择器使用‘ # ’进行标识,后面跟着id名。

基本语法: #id名{ 属性:属性值;}

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应文档中某一个具体元素。

注意:同一个id不允许应用于多个标记,虽然很多浏览器并不会报错,但JavaScript等脚本语言调用id时会出错。另外,id选择器不支持像类选择器那样定义多个值。

五、属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

语法格式:[标签名称]{ 属性:属性值;}

注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

六. 并集选择器

并集选择器是同时匹配多个选择器,取多个选择器的并集,选择器之间用逗号隔开,如p,div{ }。

语法格式:标签名1,标签名2{ 属性:属性值;}

我是span标签

我是一个p标签

我是第二个p标签

并集选择器的优点是将多个标签的相同样式提取出来,集中声明,优化代码,方便阅读。

七. 后代选择器

后代选择器也称包含选择器,用来选择特定元素的后代。如.unborn li{ },表示先匹配第二个选择器的元素,并属于第一个选择器内。

语法格式:标签名称1 标签名称2{属性:属性值;}

在CSS中,后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时,内层的元素就成为外层元素的后代。如元素B嵌在元素A内部,B就是A的后代。而且,B的后代也是A的后代,就像家族关系。

定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。如:

上述选择器中,div 为祖先元素,span 为后代元素,其作用就是选择 div 元素的所有后代 span元素,不管 span 元素是 div 元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论 span是 div 的多少辈的后代,span元素中的文本都会变成红色。

上述中,假如希望所有锚文本的字体大小是20px,就可以通过后代选择器ul span来选择 ul 元素的所有后代,因为后代选择器会影响到它的各级后代。如:

注意:

1、后代包括儿子,孙子,只要是放在指定标签的后代都是。

2、也可以不用标签名称1、2,也可以用id和class名,分别用id和class来选择。

3、后代选择器可以无限衍生。

八. 子代选择器

子代选择器使用' > '表示,如ul>li{ },表示匹配第二个选择器,且为第一个选择器的元素的后代。

语法格式:标签名称1>标签名称2{属性:属性值}

CSS 多个选择器优先级,叠加选择器权重

一、单选择器优先级

多个单选择器优先级:权重越大,其优先级越高,优先生效。!important表示权重最大,有!important修饰的永远优先生效。

!important>style>ID选择器>类选择器>元素选择>继承及*

二、叠加选择器权重计算

a、复合选择器会有权重叠加的问题

b、权重虽然会叠加,但是永远不会有进位

  1. /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */ 
  2.  
  3. ul li { 
  4.  
  5. color: green; 
  6.  
  7.  
  8. /* li 的权重是 0,0,0,1    1 */ 
  9.  
  10. li { 
  11.  
  12. color: red; 
  13.  
  14.  
  15. /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */ 
  16.  
  17. .nav li { 
  18.  
  19. color: pink; 
  20.  

本文分类:营销学院

浏览次数:61次浏览

发布日期:2022-07-03 15:19:19

本文链接:http://czxhbook.com/edu/2408.html

"
"