CSS知识点：选择符

一、选择符的种类

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等等

二、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那些事儿，大家想看详细信息，请看这本书