CSS基础学习笔记（2）——选择器
一.选择器的规则结构
每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。
<h1> {color:red; background:yellow;}
该例中，h1所代表的就是选择器，花括号中的元素就是声明块。而声名块是由一个或多个声明组成的，每个声明是一个CSS属性和该属性的值的组合。
（1）声明：
属性：关键字；
冒号后的属性值可以是一个关键字，也可以是关键字的一个列表（包含一个或多个关键字），而关键字之间会被空格隔开。
p {font:medium Helvetica;}
上述代码的含义是将段落文本定义为中等大小的 Helvetica字体。
注意：css关键字往往使用空格间隔开，但是当同时设置元素的字体大小和行高的时候，可以使用斜线（“/”）来分割。
二.选择器的分类
（1）通配选择器
通配选择器可以与任何元素匹配，就像一个通配符。
例：
* {color:red;}
即利用通配选择器只需要敲一次键盘就可以（仅一个星号）就能把文档中所有元素变成红色。
（2）元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>
（3）分组
选择器分组
将h1,h2,h3,h4,h5,h6选择器放在规则的左边，并用一个逗号分隔，其右边的规则将应用到这几个选择器所引用的元素。如：
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
等价于
h1, h2, h3, h4, h5, h6 {color:blue;}
他们的作用都如下：
声明分组
上面我们介绍了选择器分组，将选择器放在一个规则之中，那么，可不可以将声明进行分组呢？
答案当然是肯定的。
现在我们想让一行文字都有浅绿色背景，并使用18像素高的Helvetica字体显示为紫色文本。可以写为与以下形式：
h1{ font:18px Helvetica;}
h1{ color:purple;}
h1{ background:aqua;}
但是还可以将它变为这样的形式：
h1{
font:18px; Helevtica;
color:purple;
background:aqua;
}
注意:对声明进行分组时，一定要在各个声明的最后使用分号，否则在本应使用分号的声明其后的语句就不会起作用。
还可以将这两种分组方式组合起来就可以使用很少的语句对一些复杂的语句定义相当复杂的样式。
例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：
/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}
（4）类选择器
要应用样式，而不考虑具体涉及的元素，最常用的方法就是使用类选择器。
注意：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
使用类选择器时，需要直接引用一个元素的class属性的值。例如：
.sss {background:red;}
这样就可以把以sss为标记的元素到的背景设置为红色了。
.important {color:red;}
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
这段代码的作用如下：
(5)ID选择器
在某些方面，不过也有一些重要的差别。
首先，ID选择器前面有一个#号——；
第二个区别就是ID选择器不引用class属性的值。
与类选择器一样，ID选择器中可以忽略通配选择器
ID选择器仅仅可以使用一次，不可以设置相同属性的文档。
注意：class名和ID名之间的另一个区别是如果你想确定应当一个给定元素应用那样样式，ID能包含更多样式。
(6) 属性选择器
（1）简单属性选择
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a [href] [title] {color:red;}
（2）根据具体属性值选择（属性——值选择器）
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：
<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>
（3）根据部分属性选择（部分属性）
如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。在HTML中，最经典的例子就是class属性，它能接受一个或多个词作为其属性值。
<p class="aa bb cc dd ee ff">加油</p>
如果想选择class属性中包含aa的元素，可以用一个属性选择器做到这一点：
p[class~="aa"] {font-size:40px;}
注意：在选择器中出现了一个波浪号（~），这个波浪号是部分选择的关键，即根据属性值中出现的一个用空格隔开的词来完成选择，如果没有这个波浪号，则需要完成全部属性值的匹配。
（4）特定属性选择器
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
