CSS中的选择器和优先级是什么

CSS中的选择器和优先级是什么?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司于2013年成立,是专业互联网技术服务公司,拥有项目做网站、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元依兰做网站,已为上家服务,为依兰各地企业和个人服务,联系电话:13518219792

CSS选择器优先级得关系为:

!important>内联>ID选择器>类选择器>标签选择器。

一种优先级算法

1、内联样式表的权值最高 (style="") 权值为1000

2、统计选择符中的ID属性个数。(#id) 权值为100

3、统计选择符中的CLASS属性个数。(.class)  权值为10

4、统计选择符中的HTML标签名个数。 {例如:p}  权值为1

按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。 
2、有 !important声明的规则高于一切。
3、如果!important声明冲突,则比较优先权。
4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。

浏览器中也具有优先级得算法

浏览器中得优先级是由A、B、C、D的值来决定的,计算规则如下:

  • 如果存在内联样式,那么A=1,否则A=0
  • B的值为ID选择器出现的次数
  • C的值为类选择器属性选择器伪类出现的总次数
  • D的值为标签选择器伪元素出现的总次数
li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h2 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h3 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

比较规则是: 从左往右依次进行比较 ,较大者胜出,如果相等,则继续往右移动一位进行比较 。如果4位全部相等,则后面的会覆盖前面的

内联样式优先级最高,但是外部样式也可以覆盖内联样式,只需要 ! important,如果不是为了覆盖内联样式,尽量少使用!!!

css基本选择器

CSS中的选择器和优先级是什么

1、标签选择器:匹配所有使用p标签的样式p{color:red}

2、id选择器:匹配指定的标签#p2{color:red}

3、class选择器:谁指定的class谁变色,可选多个,比如.info{color:red}、p.info{color:red}

4、通用选择器:所有的标签都改变

组合选择器



	
		
		
		
		
	
	
		
		

你好我是p

我是div2下p1

div3

我是div2相邻的元素p

h2

h3

hello world

hello world div2


hello hello

h4

最后一个p

属性选择器



	
		
		
		
	
	
		
1111
2222
3333
4444

伪类

anchor伪类:专用于控制链接的显示效果

    a:link(没有接触过的链接),用于定义了链接的常规状态。

    a:hover(鼠标放在链接上的状态),用于产生视觉效果。
    
    a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
    
    a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
    
    伪类选择器 : 伪类指的是标签的不同状态:
    
               a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
    
    a:link {color: #FF0000} /* 未访问的链接 */
    
    a:visited {color: #00FF00} /* 已访问的链接 */
    
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    
    a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

before after 伪类

:before    p:before       在每个

元素之前插入内容

:after     p:after        在每个

元素之后插入内容

例:p:before{content:"hello";color:red;display: block;}

css的继承

继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代

body{color:blue;}

给body设置了颜色,这样body里面元素都会继承该样式,但是继承的权重很低,比普通元素还要低,给任意元素添加个颜色,都会把继承的颜色覆盖掉。由此可见:任何显示申明的规则都可以覆盖其继承样式。 

CSS继承也有一些限制,有一些属性不可被继承, 如:border、margin、padding、background。等

关于CSS中的选择器和优先级是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


分享文章:CSS中的选择器和优先级是什么
分享地址:http://scyanting.com/article/ipjdpj.html