css选择器---继承,优先级,层叠

最新推荐文章于 2022-04-17 11:43:02 发布

weixin_30349597

最新推荐文章于 2022-04-17 11:43:02 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/echo-hui/p/9321994.html

版权

CSS三大特性—— 继承、优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类　　

首先来看一下css选择符(css选择器)有哪些?

　　1.标签选择器(如：body,div,p,ul,li)

　　2.类选择器(如：class="head",class="head_logo")

　　3.ID选择器(如：id="name",id="name_txt")

　　4.全局选择器(如：*号)

　　5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

　　6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

　　7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

　　8.继承选择器(如：div p,注意两选择器用空格键分开)

　　9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、hover、active。注意:必须将伪类写在本身选择器之后,并且是伪类也有顺序link、visited、hover、active,就是LVHA，这个叫爱恨原则，LoVe/HAte)

　　10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute=value*]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素

　　11.子选择器 (如：div>p ,带大于号>)

　　12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

css优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别时:

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别:

选择器类别	说明	权重表示	权值表示
行内样式	行内只有一个 style = ""	（1.0.0.0）	1000
id选择器	selector中使用了几个id，即#的个数	（0.1.0.0）	100
类选择器	类,伪类,以及属性的个数，如： .outerClass .buttonClass[type="button"]:hover{} 选择器中有2个类,1个属性,1个伪类(0.0.4.0)	（0.0.1.0）	10
元素选择器	伪元素和标签元素的个数，如： p:first-child 选择器中有一个标签元素p和一个伪元素first-child	（0.0.0.1）	1

注意:权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssTest</title>
    <style type="text/css">
        div.test{
            background-color:black;
            width:100px;
            height: 100px;
        }
    /*权重为0011*/

        .test.test2{
            background-color:red;
            width:100px;
            height: 100px;
        }
    /*权重为0020*/

    </style>
</head>
<body>
<div class="test test2"></div>
</body>


</html>

根据选择器中规则对应做加法，比较权值，从左到右进行比较，大的优先级越高,如果权值相同那就后面的覆盖前面的了

之前有个面试官问我权重问题.题目如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssTest</title>
    <style type="text/css">
        div.test{
            background-color:black;
            width:100px;
            height: 100px;
        }


        .test{
            background-color:red;
            width:100px;
            height: 100px;
        }

    </style>
</head>
<body>
<div class="test test2"></div>
</body>


</html>

div是什么颜色?

答案为黑色

div.test权重为0011, .test的权重为0010,所以显示的是div.test的样式.

注意:

1.CSS选择器的使用，应该尽量避免使用 !important 和内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器;

2.CSS选择器的解析原则是从右往左的,这样的好处是尽早的过滤掉一些无关的样式规则和元素 ;

3.不要再id选择器前使用标签名(id选择是唯一的，加上标签名相当于画蛇添足);

4.尽量少使用层级关系；

5.使用类选择器代替层级关系.

参考:

https://www.cnblogs.com/zxjwlh/p/6213239.html

https://www.cnblogs.com/nangezi/p/9042973.html

转载于:https://www.cnblogs.com/echo-hui/p/9321994.html

weixin_30349597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器---继承,优先级,层叠

CSS三大特性——继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类　　首先来看一下css选择符(css选择器)有哪些?　　1.标签选择器(如：body,div,p,ul,li)　　2.类选择器(如：class="head",class="head_logo")...
复制链接

扫一扫