选择器——CSS基础
2014-04-27 21:33
363 查看
每一个CSS样式规则都由选择器（selector）和声明块（declaration）组成。选择器告诉浏览器在HTML文件中有哪些元素受影响，而声明块则说明元素受怎样的影响。声明块由一条或多条声明组成，期间用“;”分号隔开，外层用“{}”花括号包裹。单条声明由属性（property name）和值（property
value）组成。
选择器
从之前的分析，我们不难看出，要学习CSS，选择器是第一道门槛。本书将采用表格与图片示例相结合的方式来讲述这一部分的知识。
选择器释疑
在讲解了文档的树状图之后，我们再来接触一个新的概念——继承（inheritance）。继承是指CSS允许样式在应用于某一元素的同时，作用于该元素的后代元素。我们形象的说这些子元素继承了父元素的这些属性。下面我们举一个简单的例子：
HTML代码：<h1>这是一个<em>继承</em>示例</h1>
CSS代码：h1 {
color:#00F;
}
显示效果：
不难发现，em元素继承了h1元素的蓝色字体这一属性。值得注意的是：并非所有属性都能继承！一般地，边框类属性（边界、补白、边框、背景）都不能被继承。当然，继承还受优先级规则等的约束（下一节会讲述此内容）。
表：属性选择器的使用示例
伪类选择器
使用伪类选择器可以DIY超链接的样式，也可以制作自己的图片按钮。
自定义链接样式
DIY图片按钮的CSS代码
在需要图片按钮的地方插入“<span
id="btn"
onclick=" "></span>”即可。
伪元素选择器
3的浏览器并不多，本书将不会讲解全部的新伪选择器。
优先级
不同的选择器的优先级是不同的，处于高优先级的选择器相比低优先级的选择器而言，能够产生更大的影响。
表：优先级的计算方法
2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
3. “!important”声明的访客规则>“!important”声明的开发者规则(!important)>普通的开发者规则>普通的访客规则>浏览器预置规则；
4. 继承的CSS 样式不如后来指定的CSS 样式（例如#main {background-color:#CCC;}#main
p {background:#00F}最终p元素的背景色为蓝色）；
5. 在同一组属性设置中标有“!important”规则的优先级最大（但IE6不支持!important声明）；
继承法则和优先级法则构成了CSS的层叠(cascading)规则。
毫无疑问，这段代码能够实现我们的目标，但是这种含有明显重复片段的代码是不够简洁的。若要在CSS中实现这种简洁之美，分组选择器(grouping)是一个不错的选择。我们可以将多个元素共同享有的属性使用以逗号“,”隔开的分组选择器来定义，我们可以将上面的代码改写为：
两种写法的作用效果完全相同。
重要补充：元素分类
在开启下一章之前，我们有必要讲述关于元素的一种重要分类方法。这种分类方法，将元素分为了块级元素(block-level elements)和内联元素(inline-level elements)两类。
块级元素大体上包括了段落p、标题h1～h6、列表ol/ul、表格table、层div和body。从显示效果上看，块级元素会从新的一行开始，并且其后的元素也会从新的一行开始。
内联元素比较典型的是链接a、强调em、span。我们可以将不是块级元素的元素称为内联元素。
以选择器为主题的内容就介绍到这，如果您希望了解更多的内容，我建议您访问以下的网页：
W3.org关于选择器部分的定义：http://www.w3.org/TR/CSS21/selector.html
W3.org关于优先级的计算：http://www.w3.org/TR/CSS21/cascade.html
value）组成。
从之前的分析，我们不难看出，要学习CSS，选择器是第一道门槛。本书将采用表格与图片示例相结合的方式来讲述这一部分的知识。
常见的选择器
下面的表格中列出了常见的8种选择器，大多数的CSS选择器都有着和下表中示例类似的“长相”。| 选择器 | 选择对象 | 示例 |
| 通配选择器(Universal selector) | 任何类型的元素 | * {margin:0;} |
| 类型选择器(Type selectors) | HTML元素，如a、p、div | h2 {color:#36C;} |
| 包含选择器(Descendant selectors) | 所有被外层元素包含的内层元素 | table td {font-size:14px;} |
| 子选择器(Child selectors) IE 6及以下版本不支持 | 父元素的子元素，而不是所有的后代 | body>p {background-color:#36C;} |
| 类选择器(Class selectors) | 指定的类(Class) | .header {background-color:#36C;} |
| Id选择器(ID selectors) | 指定的Id | #header {background-color:#36C;} |
| 属性选择器(Attribute selectors) IE 6及以下版本不支持 | 只论属性，不管值 | a[rel] |
| x的属性值等于y | a[rel="abc"] | |
| x的属性中有y | e[foo~="warning"] | |
| x的属性以y开头，连字符为分割 | e[lang|="en"] | |
| 伪选择器(Pseudo selectors) | 伪类(Pseudo-classes)、伪元素(Pseudo-elements) | a:visited {} |
选择器释疑
包含选择器和子代选择器有什么不同？
答：两者的影响能力不同。包含选择器作用于父元素的所有后代（子、孙、曾孙），而子代选择器仅作用于子代。不能理解父、子代关系？以下面的代码为例，可做出如所示的树状图。| 上图中第二层的两个p元素和div元素都是body元素的子代，第三层的p元素是第二次div的子代，第二层的p、div和第三层的p都是body的后代；同理有第三层的p也是第二层div的后代。 |
<body> <p>abc</p> <div class="test"> <p>def</p> </div> <p>ghi</p> </body>
| 选择器 | CSS代码 | 效果 |
| 包含选择器 | body p { font-weight: bold; } | abc def ghi |
| 子代选择器 | body>p { font-weight: bold; } | abc def ghi |
HTML代码：<h1>这是一个<em>继承</em>示例</h1>
CSS代码：h1 {
color:#00F;
}
显示效果：
不难发现，em元素继承了h1元素的蓝色字体这一属性。值得注意的是：并非所有属性都能继承！一般地，边框类属性（边界、补白、边框、背景）都不能被继承。当然，继承还受优先级规则等的约束（下一节会讲述此内容）。
属性选择器的使用示例
属性选择器是在CSS2.1中出现的，它允许设计者选择带有某些属性的元素，从而更加准确的对页面呈现进行控制。下面的表格中列出了4种类型的属性选择器的使用示例：| 类型 | 代码 | 选择内容 | 效果 |
| 只论属性，不管值 | h1[title] { color: blue; } | 带有title属性的h1元素。 |  |
| x的属性值等于y | h1[title=abc] { color: blue; } | title属性值为abc的h1元素。 |  |
| x的属性以y开头，连字符为分割 | a[rel~="copyright"] { color: red; } | rel值中有copyright，且与其他值用空格隔开的a元素。 |  |
| x的属性以y开头，连字符为分割 | *[lang|="cn"] { color : red } | lang属性的值以cn开头，属性之间以“-”为分割。 | 所有lang属性为"cn"、 "cn-zh"一类的元素其颜色均变红。 |
伪选择器都有哪些？
伪选择器在一定程度上把人们从一些js脚本中解放了出来，我们可以使用伪选择器来添加一些特殊的效果。正如在前面所说的那样，伪选择器分为了伪类选择器和伪元素选择器两种。下面列出了在CSS 1和CSS 2中定义的一些伪选择器：| 选择器 | 选择对象 | 特殊 |
| :first-child | 父元素的第一个子元素 | |
| :link | 未被访问过的链接 | 1. 这两个选择器专门用于a元素 2. 有时客户端程序会将访问过的链接按:link呈现 |
| :visited | 已被访问过的链接 | |
| :hover | 用户指向该元素，但为点击 | 这三个选择器是通用的 用于a元素时，:hover必须置于:link和:visited之后；:active必须放在:hover之后 |
| :active | 被激活的元素，如用户点击该元素 | |
| :focus | 拥有键盘输入焦点的元素 | |
| :lang | 有lang属性的元素 | html:lang(fr-ca) { quotes: ‘« ‘ ‘ »’ } |
使用伪类选择器可以DIY超链接的样式，也可以制作自己的图片按钮。
a:link{color:#FF0000} /* 未访问的链接 */
a:visited{color:#00FF00} /* 已访问的链接 */
a:hover{color:#FF00FF} /* 鼠标移动到链接上 */
a:active{color:#0000FF} /* 选定的链接 */自定义链接样式
#btn {
display:block;
width:82px;
height:30px;
background:url(images/submit.png);
}
#btn:hover {background-position:-91px 0;}
#btn:active {background-position:-182px 0;}DIY图片按钮的CSS代码
在需要图片按钮的地方插入“<span
id="btn"
onclick=" "></span>”即可。
| 选择器 | 选择对象 | 说明 |
| :first-line | p元素（段落）的第一行 | 可以使用<P:first-line></P:first-line>来标明希望应用:first-line规则的内容，不添加则会根据字数多少来确定第一行。 通过:first-line和:first-letter的组合可实现如下的效果：  |
| :first-letter | 块级元素第一行的第一个字 | |
| :before | 在元素的内容前面插入新内容 | |
| :after | 在元素的内容之后插入新内容 |
一位卓越的小伙伴——CSS 3中的伪选择器
在CSS 3中定义了一些新的、方便的伪选择器，让我们能够更加方便的控制页面的性状。这些新的伪选择器包括:target、:enabled、:disabled、:checked、:root、:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty、:not。鉴于当前支持CSS3的浏览器并不多，本书将不会讲解全部的新伪选择器。
优先级
不同的选择器的优先级是不同的，处于高优先级的选择器相比低优先级的选择器而言，能够产生更大的影响。优先级计算
在CSS中，优先级由A、B、C、D四个独立因子加权组成。根据A、B、C、D的数量，我们不难计算出选择器的优先级特性。| 影响因子名称 | 计算方法 |
| A | 在HTML元素中使用style属性定义样式则记A为1，其余记为0。 |
| B | 等于ID属性的个数。例如#main #container{}的B为2。 |
| C | 等于类属性与伪类属性之和。例如ul ol li.red {}的C为1。 |
| D | 等于元素名称个数与伪元素属性之和。例如p:first-line{}的D为2。 |
优先级法则
1. 选择器都有一个权值，权值越大越优先；2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
3. “!important”声明的访客规则>“!important”声明的开发者规则(!important)>普通的开发者规则>普通的访客规则>浏览器预置规则；
4. 继承的CSS 样式不如后来指定的CSS 样式（例如#main {background-color:#CCC;}#main
p {background:#00F}最终p元素的背景色为蓝色）；
5. 在同一组属性设置中标有“!important”规则的优先级最大（但IE6不支持!important声明）；
继承法则和优先级法则构成了CSS的层叠(cascading)规则。
简洁之美——分组选择器
“学术之美在于简洁”，简洁的代码不仅易于维护，也能减少在内容传输过程当中的流量消耗。在CSS中，我们也应该将追求代码的简洁作为一项奋斗的目标。试着构想一个情境：h2元素和p元素都要被设置为灰色的文本，一般情况下，我们可以写如下的代码：h2 {
color:#CCC;
}
p {
color:#CCC;
}毫无疑问，这段代码能够实现我们的目标，但是这种含有明显重复片段的代码是不够简洁的。若要在CSS中实现这种简洁之美，分组选择器(grouping)是一个不错的选择。我们可以将多个元素共同享有的属性使用以逗号“,”隔开的分组选择器来定义，我们可以将上面的代码改写为：
h2, p {
color:#CCC;
}两种写法的作用效果完全相同。
重要补充：元素分类
在开启下一章之前，我们有必要讲述关于元素的一种重要分类方法。这种分类方法，将元素分为了块级元素(block-level elements)和内联元素(inline-level elements)两类。块级元素大体上包括了段落p、标题h1～h6、列表ol/ul、表格table、层div和body。从显示效果上看，块级元素会从新的一行开始，并且其后的元素也会从新的一行开始。
内联元素比较典型的是链接a、强调em、span。我们可以将不是块级元素的元素称为内联元素。
练习题
1.计算优先级，填写下面的表格| 规则 | A | B | C | D | 权值 |
| * {} | 0 | 0 | 0 | 0 | 0,0,0,0 |
| li {} | 0 | 0 | 0 | 1 | 0,0,0,1 |
| li:first-line {} | 0 | 0 | 0 | 2 | 0,0,0,2 |
| ulli {} | 0 | 0 | 0 | 2 | 0,0,0,2 |
| ulol+li {} | 0 | 0 | 0 | 3 | 0,0,0,3 |
| h1 + *[rel=up]{} | 0 | 0 | 1 | 1 | 0,0,1,1 |
| ulolli.red {} | 0 | 0 | 1 | 3 | 0,0,1,3 |
| li.red.level {} | 0 | 0 | 2 | 1 | 0,0,2,1 |
| #x34y {} | 0 | 1 | 0 | 0 | 0,1,0,0 |
| <pID=x97zstyle="color:green"> | 1 | 0 | 0 | 0 | 1,0,0,0 |
W3.org关于选择器部分的定义：http://www.w3.org/TR/CSS21/selector.html
W3.org关于优先级的计算：http://www.w3.org/TR/CSS21/cascade.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html css层叠样式基础（常用选择器）（三）
- 【CSS】——三大基础选择器以及优先级
- css基础-选择器
- CSS之基础重点选择器的使用
- css基础属性和选择器
- CSS基础研究(一)-各种各样的选择器
- 04-CSS 选择器（基础选择器、高级选择器） CSS 的继承性和层叠性
- CSS基础-选择器
- CSS基础：基本选择器分类和使用
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- css基础 a:link/visited... 链接伪类选择器 简单示例
- css基础 并集选择器 多个标签用逗号隔开，使用相同的样式
- CSS基础（三）：选择器
- css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)
- css基础-html中使用css、基本选择器、类选择器、id选择器、通用选择器、符合选择器、css权重
- css基础之选择器
- HTML与CSS基础之伪类选择器(三)
- css基础选择器说明
- css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)
- css基础巩固之选择器