2.（初级）CSS3选择符

一、属性选择符[  ]

通用属性选择符[ ]

例如：img[title]、input[type=”text”]

以此开头属性选择符[^=xxx]

例如：a[href^=”http://”]

以此结尾属性选择符[$=xxx]

例如：a[href$=”.pdf”]

符合此所有属性选择符[*=xxx]

例如：img[src*=”logo”]

二、子代选择符

:first-child——第1个子元素

:last-child——最后1个子元素

:only-child——唯一子元素

:nth-child(odd)——奇数子元素

:nth-child(even)——偶数子元素

:nth-child(2)——第2个子元素

:nth-child(3n)——第3个子元素及3的倍数子元素

:nth-child(3n+1)——第3+1个子元素及3的倍数+1子元素

:nth-child(-n+3)——第3个子元素之前的所有元素

:first-of-type——符合特定标签类型的第1个子元素

例如：.sidebar p:first-of-type 选取.sidebar类中第1个<p>标签

:last-of-type——符合特定标签类型的最后1个子元素

例如：.sidebar p:last-of-type 选取.sidebar类中最后1个<p>标签

:nth-of-type(xxx)——类似:nth-child(xxx)

三、同辈选择符 + ~

+：选取相邻两个同辈元素

例如：h2+p，选取h2及相邻p元素

~：选取指定类型的所有同辈元素

例如：h2~p，选取h2同辈的所有p元素

四、其他选择符

:target选择符：依赖于ID属性，要使用ID连接到网页中的特定位置

例如：<a href=”#ID”>超链接至form</a>

      <form id=”ID”>XXX</form>

  #ID:target——点击<a>后form成为target

:not()选择符：选取不符合条件的标签

例如：p:not(.aaa)

！not()只能使用简单选择符，不能使用情况如下：

1、后代选择符（div p a）。

2、伪元素选择符（:hover）

3、群组或组合选择符（h2 + p）

4、同时使用多个not()选择符（ p:not(#ID):not(.class) ）

四、选择符优先级

标签选择符：+1（包括伪元素）

类选择符：+10（包括伪类）

ID选择符：+100

行内样式：+1000

例如：

a:hover      1+10=11

p:first-line    1+1=2

 

属性后面添加!import忽略优先级，直接覆盖属性

例如：

.nav a {color:red}

a{color:teal !import}，直接覆盖color:red