CSS选择器的总结

CSS选择器

元素选择器、id选择器、类选择器、属性选择器、派生选择器包括（后代选择器、子元素选择器、相邻兄弟选择器）
补充伪类

一、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

html {color:black;}
h1 {color:blue;}

二、id选择器

id 选择器可以为标有特定 id 的HTML元素指定特定的样式，以 “#” 来定义
将id选择器的样式与元素关联，必须将id属性指定为一个适当的值。

 <p id="box1">这个段落是红色。</p>
 <p id="box2">这个段落是绿色。</p>

然后在HTML代码中，id 属性为box1的字体显示为红色，而 id 属性为box2的字体显示为蓝色加粗。用id选择器先把style样式设成这样

#box1{color:red;}
#box2{color:blue;font-weight:bold;}

注意：

1、在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
2、ID 选择器不能结合使用，因为 ID
属性不允许有以空格分隔的词列表。

三、类选择器

1、简介
将类选择器的样式与元素关联，必须将 class 属性指定为一个适当的值。

<h1 class="box">
This heading is very important.
</h1>

<p class="box">
This paragraph is very important.
</p>

若想把h1元素和p元素的字体颜色设为红色，只用将类选择器改样式即可。

.box{color:red;}

2、结合元素选择器
接上文例子，若只想把p元素的字体颜色改成红色,h1背景颜色为黄色

p.box{color:red;}
h1.box{backgroundcolor:yellow;}

3、多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

 <p class="box1">蓝色的字</p>    
 <p class="box2">红色的字</p>    
 <p class="box1 box2">绿色的字</p>

如果想改变第3个div的样式，就要写成

.box1.box2{color:green;}

四、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。CSS3新增选择器
1、把包含标题（title）的所有元素字体变为红色

*[title] {color:red;}

2、只对有 href 属性的锚（a 元素）应用样式

a[href] {color:red;}

3、将同时有 href 和 title 属性的字体设置为红色

a[href][title] {color:red;}

4、总结

• E[attr]只使用属性名，但没有确定任何属性值
• E[type="text"]指定属性名，并指定了该属性的属性值
• E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个以空格隔开的词列表，词列表中包含了一个value词
• E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
• E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
• E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
• E[attr|="value"]指定了属性名，并且属性值是value或者以"value-"开头的值（比如说zh-cn）

五、派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
1、后代选择器（包含选择器）
若有

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

只想把h1中的em元素改成红色

h1 em {color:red;}

2、子元素选择器
不选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
若有

<h1>This is <strong>very</strong> important.</h1>
<h1>This is  <em>really  <strong>very</strong> </em> important.</h1>

只想把第一个h1里strong元素字体变红，则用

h1 > strong {color:red;}

3、相邻兄弟选择器(下一个选择器)

可选择紧接在另一元素后的元素，且二者有相同父元素

若要将所有p元素后一个的div元素背景颜色全为红色，则

p + div{backgroundcolor:red;}

六、伪类

用于向某些选择器添加特殊的效果
1、锚伪类

a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

2、伪类补充

• E:nth-child(n) 表示E父元素的第n个子节点，且类型为E，特殊值odd（匹配奇数行）等价于2n/even（匹配偶数行）等价于2n+1（下面的其他选择器同理）
• E:nth-last-child(n) 表示E父元素的第n个子节点，从后向前算，且类型为E
• E:nth-of-type(n) 表示E父元素的第n个E子节点
• E:nth-last-of-type(n)表示E父元素的第n个E子节点，从后向前算
• E:first-child 表示E父元素中的第一个子节点，且类型为E，等价于E:nth-child(1)
• E:last-child 表示E父元素中的最后一个子节点，且类型为E，等价于E:nth-last-child(1)
• E:first-of-type 表示E父元素中的第一个E子节点，等价于E:nth-of-type(1)
• E:last-of-type 表示E父元素中的最后一个E子节点，等价于E:nth-last-of-type(1)
• E:empty 表示E元素没有子节点。注意：包含文本节点
• E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点
• E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点
• E:target 表示当前的URL片段的元素类型（id被a的href链接并被点击，也就是锚点——访问的a标签的链接为某元素的id），这个元素必须是E
• E:disabled 表示不可点击（获取焦点）表单控件
• E:enabled 表示可点击（获取焦点）的表单控件
• E:checked 表示已选中的checkbox或radio
• E:not(s) 表示E选中的元素中的s不被匹配（s是标签名）

最后补充选择器优先级：

行间样式(不是选择器) > id选择器 > class选择器>元素选择器 > 通配选择器(*)