一文看懂CSS3选择器

上下文选择符

严格来讲，叫后代组合式选择符。

article p { font-weight:bold; }，用空格分隔，祖先和父元素都可以。

特殊的上下文选择符

子选择符 >：section > h2 {...}，父子关系

紧邻同胞选择符 +：h2+p {...}，紧跟在h2后面

一般同胞选择符 ~： h2 ~ a {...}，在h2后面，不一定紧跟

通配符选择符 ： { margin:0;padding:0 }

ID与类选择器，最常用

ID选择器

具有唯一性

选择#p1{}，搭配元素div#p1 {...}

也可用于页面内导航

<a href="#bio"  />
<p id="bio"></p>

类选择器

多个元素可共用

<p class="p1"></p>，选择 .p1{}，搭配元素div.p1 {...}
多类选择：<p id="p1 p2"></p>, .p1.p2 {...}

属性选择器

属性名选择符：img[title]

属性值选择符：img[title="red flower"]

伪类

UI伪类

链接伪类：

a::link

• link,等着用户点击
• visited,用户此前点击过这个链接
• hover,鼠标指针正悬停在连接上或者其他元素上
• active,链接正在被点击(鼠标在元素上按下了还未释放)

速记：LoVe?HA!

input元素：focus获取焦点

target伪类，用户点击a指向目标元素，目标元素就是target

维基百科中大量应用。

结构化伪类

1.first-child和last-child

2.nth-child(n)

伪元素

first-letter，首字母

first-line，首行 p::first-line { font-variant:small-caps; }

before，元素前添加内容

after，元素后添加内容

加权优先级(特指度)

数值越大，优先级越高，最高的是!important

I-C-E的公式：

1.选择符有1个ID就在I上+1

2.选择符有1个类就在C上+1

3.选择符有1个元素就在E上+1

p	0-0-1特指度	1
p.largetext	0-1-1特指度	11
p#largetext	1-0-1特指度	101
body p#largetext	1-0-2特指度	102
body p#largetext ul.mylist	1-1-3特指度	113
bodyp#largetext ul.mylist li	1-1-4特指度	114