学步园

CSS选择符

说明

示例

通用选择符

用于样式表中的所有元素

*{ color:red}

标签选择符

为HTML标签应用样式

p{…}

ID选择符

<input   id="top"  type="text" />

#top{ ... }

CLASS选择符

<div class="btn">***</div>

.btn{ ... }

多元素选择符

多元素选择符（逗号隔开）

.td,div,input{ color:#06F; }

后代选择符（空格隔开）

div h2{ ... }、table td{ ... }

子元素选择符（>隔开）

div > strong { color:#f00; }

相邻元素选择符（+隔开）

p + p { color:#f00; }

伪选择符

a:link{ ... }未访问链接。

a:visited{ ... }已访问链接。  
a:hover{ ... }鼠标滑过的链接。

a:active{ ... }点击的链接

input:focus{ ... }、

p:first-child{ ... }、 
@page:first{ ... }、

h1:before{ ... }、
body:after{ ... }、

q:lang(bt){quotes:*** }

属性选择符

匹配所有具有att属性的E元素，不考虑它的值。

E[att]

匹配所有att属性等于“val”的E元素

E[att=val]

匹配所有att属性具有多个空格分隔的值、

其中一个值等于“val”的E元素

E[att~=val]

匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等

E[att|=val]

属性att的值以"val"开头的元素

E[att^=”val”]

属性att的值以"val"结尾的元素

E[att$=”val”]

属性att的值包含"val"字符串的元素

E[att*=”val”]

优先级：

1

 ！important声明优先级最高。如：div{ color:red !important }

2

 内嵌样式

3

样式表中按选择器（id，class，HTML标签）的权重排序

4

 ID 选择器

5

 Class 类，属性，伪类 选择器

6

 HTML 标签，伪元素 选择器

7

 按执行顺序，后面的覆盖前面的样式

  如果没有设置样式，则父级节点的样式会自动应用到其下的子节点的样式中，即CSS具有继承性。当然某些如border，margin，padding，background不会被继承。