CSS知识点：选择符

1、选择符的种类

1）通配选择符

它用来给页面全部的元素设置样式

*{margin:0;padding:0;}。可是实际当中不建议这么用，页面中用到了哪些样式，就统一设置样式，由于*影响性能。也能够给某元素的全部的后代元素应用样式：p *{color:red;}

2）标签选择符

顾名思义，经过标签来限定样式做用域

div{padding:5px;}

3）类选择符

和面向对象中的类有着相似的功能，须要的时候调用便可，达到重用的目的。将样式定义成一个类，须要使用的地方调用便可。

.myClass{font-size:24px;}

<p>普通文字<p>

<p class="myClass">自定义样式</p>

4）ID选择器

经过#ID来精肯定位页面元素的属性

#trapper{padding:10px;font-size:26px;}

<div id="trapper">

<ul>

<li>1</li>

<li>2</li>

</ul>

</div>

5）包含选择符

 直接上实例

div strong{font-size:24px;text-decoration:underline;}

<div>

　　<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

　　<strong>我是div中的strong内容（”孩子”）</strong>

</div>

可见，包含选择会将某元素下的全部包含元素都设置样式。无论层级有多深。

6）子选择符

和上边的区别，你们看出来了吗？

 div>strong{font-size:24px;text-decoration:underline;}

<div>

　　<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

　　<strong>我是div中的strong内容（”孩子”）</strong>

</div>

 

7）相邻选择符

 控制相邻的元素样式

div+strong{font-size:24px;text-decoration:underline;}

<div>

　　<strong>我是p的邻居</strong>

　　<p><strong>我是div中的p标签下的strong内容（”孙子”）</strong></p>

　　<div>div中的div</div>

　　<strong>我是div中的strong内容（”孩子”），并且我也是p的邻居</strong>

　　<strong>我显示有下滑线吗</strong>

</div>

要是p+strong+strong呢？strong+strong(能够并排多个strong看看效果)？css很强大！！

8）属性选择符

 四种方式

E[attr] 具备attr属性的全部HTML标签 ，如div[class]表示具备class属性的全部div

E[attr="value"] 具备attr属性且属性值为value的标签，如input[type="text"]{border:2px;}

E[attr~="value"] 具备attr属性，且有多个空格隔开的字段，其中一个字段为value的元素。

E[attr|="value"] 具备attr标签，且必须以value值开始及使用-分隔的元素

9）混合选择符

 如p.className p#id等等

2、CSS选择符优先级计算

整体上按照就近原则应用样式。通常计算以下

行内样式：1000

ID选择符：0100

类选择符：0010

标签选择符：0001

例如：body #wrapper p {...}，那么它的优先级指数就是 1+100+1=102，而body div #wrapper p {...}的优先级指数就是 1+ 1 +100 + 1 =103

但须要注意一个关键字!important，除了IE6,他的css优先级最高。

#box {
     color:red !important;
     color:blue;
 }

这样，对于IE7+显示字体颜色为红色，不会被蓝色覆盖掉。IE6显示为蓝色。

 本文参考 CSS那些事儿，你们想看详细信息，请看这本书