CSS常用选择器总结.doc

CSS常用选择器
1、 CSS元素选择器
h1{color:red;}
h2{font-weight:bold;}

html:
<h1>OK</h1>
<h2>OK</h2>
效果图：

2、 选择器分租
h1,h2{color:bule;}

html:
<h1>OK</h1>
<h2>OK</h2>
效果图：

3、 类选择器
(1).important{color:red;}

html:
<h1 class=”important”>OK</h1>
<p class=”important”>OK</p>
效果图：

(2)
h1.important{color:bule;}
Html:
<h1 class=”important”>OK</h1>

效果图：

(3)
.important{font-weight:bold;}
.warning{font-weight:italic;}
.important.warning{background:silver;}

html:
<p class=”important”>important</p>
<p class=”warning”>warning</p>
<p class=”important warning”>important warning</p>

效果图：

4、 ID选择器
(1)#important{font-weight:bold;}

Html:
<p id=”important”>OK</p>
效果图：

注意事项：
1） 与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
2） 同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
3） 这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的 ID 值）：
<h1 id=”important”>OK</h1>
<em id=”important”>OK</em>
<ul id=”important”>OK</ul>
4) 由于字母 i 的大小写不同，所以选择器不会匹配下面的元素。
<p id=”Important”>OK</p>
5、 属性选择器：
（1）可以对href属性的锚应用样式
a[href] {color:red;}

html:
<a href=””>百度</a>
效果图：

（2）可以对多个属性进行选择
a[href][title] {color:bule;}
(只有具备属性href，并且同时有title的才可以用上面的选择器)
html:
<a title=”百度” href=””>百度</a>

效果图：

也可以对带有alt属性的图片应用样式
img[alt]{border:5px splid red;}
(对有备注的图片进行设置图片属性)
(3)选择有moons属性的所有planet元素，使之显示为红色
planet[moons]{color:red;}

html:
<planet>Venus</plant>
<planet moons=”1”>Earth</planet>
<planet moons=”2”>Mars</planet>

效果图：

假设上面设定为planet[moons=“1”]{color:red;}
html
<planet>Venus</plant>
<planet moons=”1”>Earth</planet>
<planet moons=”2”>Mars</planet>
效果图:

(4)根据具体属性值进行选择
(假设对指定文档的超链接变成红色)
a[href=”

html:
<a href=”

效果图：

注意：
属性和属性值必须完全匹配，如果属性值有空格分隔的值列表
例如：
p[class=”important warning”]{color:red;}

那么html必须写成下列方式
html:
<p class=”important warning”>OK</p>
(5)根据部分属性值选择
p[class=~”important”]{color:red;}
(上面语句说明选择class属性中包含important的元素)

html:
<p class=”important”>OK</p>
<p class=”important warning”>OK</p>

效果图：

6、 伪类和CSS类
(1)锚伪类：
a:link{color:#FF0000}未访问的连接
a:visited{color:#00FF00}已访问的连接
a:hover{color:#FF00FF}鼠标移到连接上
a:active{color:#0000FF}选定连接

注意:
在CSS定义中，a:hover必须置于a:link和a:visited之后才有效
a:active必须置于a:hover后才有效
伪类对大小写不敏感

(2)伪类可以和CSS类配合使用
a. important:visited {color:red}

html:
<a class=”important” href=””>百度</a>
(上面的代码指连接被访问就显示为红色)