CSS常用的选择器和优先级的权重问题

CSS注释

CSS修改页面中的所有标签,必须借助选择器选中。
选择器中,可以写多对CSS属性,用{}包裹;
每个属性名与属性值之间用:分隔,多对属性之间,必须用;来分隔

选择器{
 属性1:属性值1;
 属性2:属性值2;

【选择器的命名规范】

1、只能有字母、数字、下划线、减号组成。
2、开头不能是数字,也不能是只有一个减号。
一般,起名要求有语义,使用英文单词与数字的组合。

1、标签选择器

写法:HTML标签名{}
作用:可以选中页面中,所有与选择器同名的HTML标签。

例如:

li{
  color:red;
  font-size: 48px;
}

2、类选择器(class选择器)

写法:.class名{}
调用:在需要调用选择器样式的标签上,使用class=“class名”调用选择器
优先级:class选择器>标签选择器

例如:

.first{
  color: blue;
}

3、ID选择器

写法:#ID名{}
调用:需要调用样式的标签,起一个id=“ID名”
优先级:ID选择器>class选择器
注意:一个页面中,不能出现同名ID

例如:
#one{
  background-color: yellow;
}

         【class选择器和ID选择器的区别】
       1、写法不同:class选择器用.声明,ID选择器用#声明;
       2、优先级不同:ID选择器>class选择器;
       3、作用范围不同:class选择器可以多次调用,ID选择器只能使用一次。

4、通用选择器
写法:*{}
作用:可以选中页面中所有的HTML标签。
优先级:最低!!
例如:
*{
  color: orange;
}

5、并集选择器
写法:选择器1,选择器2,.....,选择器n{}
生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。
例如:
li,.first{
  color: red;
}

6、交集选择器
写法:选择器1选择器2......选择器n{} 所有选择器紧挨着,没有分隔
生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效
例如:
li.first{
  color:red;
}

7、后代选择器
写法:选择器1选择器2......选择器n{} 选择器之间空格分隔
生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。(后代包括子代、
孙代、重孙代 。。。)
例如:
div span{
  color:orange
}

8、子代选择器
写法:选择器1>选择器2>......>选择器n{} 选择器之间用>分隔
生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(
 中间不能间隔任何标签)
例如:
div>span{ 
  color: orangered;
}

【优先级的权重问题】
1、css生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;

2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
 ID选择器为100 > class选择器为10 > 标签选择器为1
 注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。

3、当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。

时间: 2024-10-17 17:23:42

CSS常用的选择器和优先级的权重问题的相关文章

CSS选择器的优先级及权重问题【CSS核心问题】

1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2.之所以有优先级问题,归根到底是这些选择器有权重的,权重值越大,优先级越高!如下所示: !important                              Infinity[正无穷]          行间选择器                            1000[权重]        

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

前端学习 -- Css -- 选择器的优先级

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示. 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式.

css常用知识点

1.css的简介  层叠样式表 样式表:有很多的属性和属性值 层叠:一层一层的.优先级 第一个:把样式和html分开显示 第二个:html的属性很少,css里面样式很强大 2.css和html结合方式 有四种结合方式 第一种结合方式:在每个html标签里面都有一个属性 style,在style属性里面写css代码  代码  <div style="color:black;">aaaaccccbbbb</div> 格式: style="属性名称1:属性值

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS选择器、优先级和常用的选择器

优先级(由高到低): 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) 上面九种选择器中ID选择器的效率是最高,而伪类选择器的效率则是最低. element>element 选

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

详解CSS选择器、优先级与匹配原理【转】

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

CSS选择器及其优先级

一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> &l