css选择器

css选择器有三个特性:特殊性,继承性,层叠性。

自己的理解如下:

特殊性:

表现在权重上  

0   0   0   0

第一个0代表行内元素;

第二个0代表ID;

第三个0代表class;

第四个0代表元素或伪类;

例子:<p style="color:red;">silence</p> 这个就是1 0 0 0

#id{color:blue;}这个是0 1 0 0

.class{color:orange;} 这个是0 0 1 0

p{color:black;}这个是0 0 0 1

p#id 0 1 0 1

p.class 0 0 1 1

p span 0 0 0 2

 1 <!DOCTYPE html>
 2   <html>
 3   <head>
 4     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 5   </head>
 6   <style type="text/css">
 7   #dd{color: orange;  }
 8   .text{color: blue;  }
 9   div{color: red;}
10   div#dd{color:pink;}
11   </style>
12  <body>
13      <div class="text" id="dd">Hi, hi,hi , hi,hihi hi hi,I like him ,he has a history</div>
14 </body>
15 </html>

这个字体的颜色为权重最高的,结果是pink色。

继承性:

子元素可以继承父元素的属性,父元素不能继承子元素的属性。

注意的是:1. html是body的父元素,但可以继承body的属性,这是一个例外,因为body可以看做是根元素;

   2.有些属性是不能继承的。如框模型属性(外内边距,背景,边框)

层叠性

!important>行内元素 > <style></style> > 外部引用的css样式

如果上下都出现同一元素的同一属性,则后出现的优先级高

p.aa{color:red;}

p.aa{color:blue;} 则class为aa的p标签里的内容是blue色;

还有一个是创作人员样式》读者的样式

p em{color:black;}/*author style*/

p em{color:blue;}/*reader style*/

颜色为black

加重要声明后读者的样式》创作人员的样式

p em{color:black!important;}/*author style*/

p em{color:blue!important;}/*reader style*/

颜色为blue;

注意的是

#id的权重为0 1 0 0;

p[id='']的权重为0 0 1 0;

a的color会根据浏览器的首选项设置来应用样式;所以有时候a的颜色不能继承父级颜色而是浏览器默认的颜色

a{color:inherit;}就会继承而不是用户代理的默认样式

原文地址:https://www.cnblogs.com/MissBean/p/4305348.html