CSS选择器——简介
学习CSS最好的方式之一是直接开始使用它。
目录[-]
p{color:Black;} a{text-decoration:none;}
结合选择器和声明的分组
h1, h2, h3, h4, h5, h6 { color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana; }
/* 注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。*/
提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。
后代选择器由其他两个选择器之间的空格表示。
li a { text-decoration:none;} div.planet h2 { font-size:18px; margin-top:0; }/*只有当<h2>元素是类名为planet的<div>元素的后代时，才会选取该<h2>元素。 */ /*后代选择器不限于只使用两个元素，必须用一个空格隔开。*/ div.planet table td { padding:0 10px 0 0; text-align:left; }
由一个#字符表示，用于寻找具有指定ID的元素。
ID 属性不允许有以空格分隔的词列表。
#intro { font-weight:bold;} <p id="intro">Some Text</p>
由一个点号表示，用于寻找具有指定的类名的元素。
.datePosted { color:Green;} <p class="datePosted">21/9/2013</p>
如果想给<div>和<img>元素提供相同的类名，但让一条样式表规则只应用于<div>元素，而不应用于<div>元素，可以限定一个类选择器到一种元素的方法：当附加一个类型选择器到一个类选择器上时，就限定了样式表规则只作用于相应类型的元素。
div.planet { margin:10px 0; }/*元素名称和类选择器之间不能有空格。有空格是后代选择器。*/
元素可以被分配多个类名，例如<div class=”planet jupiter”>，这个class属性的值包括两个类名，空格隔开，div元素将接受两条规则中的声明。
.planet { margin:10px 0; } .jupiter { background-image:url(jupiter.jpg); }
类名也可以串联在一起：
.planet.jupiter { background-image:url(jupiter.jpg); }/*只应用于在其class属性中同时包含了这两个类名的元素*/ /* IE6根据CSS1规范来解释串联的类名，串联的类名中只有最后一个类名才会被识别。 */
|
如果希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么很可能创建两个类并且在每个标题上应用一个类。 一种简单得多的方法是使用类型，后代、ID和（或）几种选择器的组合： #mainContent h1 { font-size:1.8em; } #secondaryContent h1 { font-size:1.2em; } <div id="mainContent"> <h1>Welcome to my site</h1> ... </div> <div id="secondaryConent"> <h1>Latest news</h1> ... </div>
避免“多类症”，在不适合使用ID的情况下对元素应用类，尽可能少使用类。如果类很多，那很可能意味着你的文档的结构有问题。 这时应该分析这些元素之间的差异，常常发现唯一的差异是它们在页面上出现的位置。 不要给这些元素指定不同的类，而是将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们。 使用类型、后代、ID等多种选择器的组合，可以成功地找到许多元素，避免“多类症”。 |
由一个星号表示，通用选择器的作用就像是通配符，它匹配所有可用元素，一般用来对页面上的所有元素应用样式。
例如，可以使用以下规则删除每个元素上默认的浏览器填充和空白边：
*{ padding:0; margin:0; }
在和其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。
子选择器使用了大于号（子结合符），子结合符两边可以有空白符，这是可选的。
后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。
注：除了IE6以外，所有主流浏览器都支持直接子选择器。
示例：外层列表中的列表项显示一个定制的图标，而嵌套列表中的列表项不受影响。
#nav>li { background:url(images/right.png) no-repeat left top; } <ul id="nav"> <li>Home</li> <li>Services <ul> <li>Design</li> <li>Development</li> <li>Consultancy</li> </ul> </li> <li>Contact US</li> </ul>
在IE6或更低版本中，可以使用通用选择器模拟子选择器的效果。
#nav * { background:url(images/right.png) no-repeat left top; } #nav li * { background-image:none}
相邻选择器应用于元素的下一个兄弟元素。通过+ 符号（相邻兄弟结合符）串联，
注：除了IE6以外，所有主流浏览器都支持相邻选择器。
示例：可以使用相邻同胞选择器让顶级标题后面的第一个段落以粗体显示，同时不影响其他断落：
h1+p { font-weight:bold;} <h1>Main Heading</h1> <p>First Paragraph</p> <p>Second Paragraph</p>
注：除了IE6，所有主流浏览器都支持属性选择器。
|
选择器 |
描述 |
|
用于选取带有指定属性的元素。 |
|
|
用于选取带有指定属性和值的元素。 |
|
|
用于选取属性值中包含指定词汇的元素。 |
|
|
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
|
|
匹配属性值以指定值开头的每个元素。 |
|
|
匹配属性值以指定值结尾的每个元素。 |
|
|
匹配属性值中包含指定值的每个元素。 |
*[title] {color:red;} /* 把包含标题（title）的所有元素变为红色 */ a[href] {color:red;} /* 只对有 href 属性的锚（a 元素）应用样式 */ a[href][title] {color:red;} /* 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色 */ img[alt] {border: 5px solid red;} /* 可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像 */
示例：当鼠标停留在具有title属性的元素上时，大多数浏览器都会显示一个工具提示，可以使用这种特性解释某些内容（比如缩写词）的含义：
<abbr title="Cascading Style Sheets">CSS</abbr> /*可以使用属性选择器对具有title属性的abbr元素应用样式。*/ abbr[title] { border-bottom:1px dotted #999;} abbr[title]:hover{cursor:help;} /*元素的底部加上点边界，鼠标停留指针改为问号 ,表示这个元素与众不同，从而提供更多的信息*/
a[href="http://www.cnblogs.com/crayonchen/"] {color: red;} /* 将指向 Web 服务器上某个指定文档的超链接变成红色 */ a[href="http://www.cnblogs.com/crayonchen/"][title="猩崽"] {color: red;} /* 把多个属性-值选择器链接在一起来选择一个文档 */
示例：使用rel属性值nofollow链接的站点无法从Google获得评级收益。以下规则在这种链接旁边显示一个图像，以此表示不推荐这个目标站点：
a[rel="nofollow"] { background-image:url(nofollow.gif); padding-right:20px; }
|
由于IE6和更低版本不支持属性选择器，有一种更聪明的使用属性选择器的方法。可以对IE应用一种烟花是，对更符合标准的浏览器应用另一种样式。 例如：IE在显示1像素的点边界方面有问题，所有可以讲点边界显示为虚线。可以使用属性选择器将点边界只应用于能够正确地表现它的浏览器，这需要寻找class属性而不是使用类选择器。 .intro{ border-style:solid;} [class="intro"] { border-style:dotted;}
|
p[class~="important"] {color: red;} /* 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~） */ /* 如果忽略了波浪号，则说明需要完成完全值匹配。 */
|
类型 |
描述 |
|
[abc^="def"] |
选择 abc 属性值以 "def" 开头的所有元素 |
|
[abc$="def"] |
选择 abc 属性值以 "def" 结尾的所有元素 |
|
[abc*="def"] |
选择 abc 属性值中包含子串 "def" 的所有元素 |
*[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>
假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：
img[src|="figure"] {border: 1px solid gray;}
当然，这种属性选择器最常见的用途还是匹配语言值。
用来表示动态事件、状态改变等情况。伪类属性的前面只能有一个冒号。
|
属性 |
描述 |
CSS |
|
向被激活的元素添加样式。 |
1 |
|
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
|
当鼠标悬浮在元素上方时，向元素添加样式。 |
1 |
|
|
向未被访问的链接添加样式。 |
1 |
|
|
向已被访问的链接添加样式。 |
1 |
|
|
向元素的第一个子元素添加样式。 |
2 |
|
|
向带有指定 lang 属性的元素添加样式。 |
2 |
:link 表示未访问的超链接。 例 a:link{color:meduimblue;}
:visited 表示已访问的超链接。
:hover 表示鼠标悬停在该元素上。
:focus 表示获得键盘焦点。
:active 表示用户正在单击该元素。
动态伪类出现在样式表中的顺序是很重要的，如果:link伪类定义在:focus伪类之后，那么:link伪类将被优先采用，:link伪类的声明将重写:focus伪类的声明。
在样式表中出现的顺序遵循的口诀是LoVe HAte，即:link、:visited、:hover和:active。 :hover和:focus一般同时包含，使它们接收相同的样式。
a:focus, a:hover{ text-decoration:underline; }/*以逗号分组选择器 */
:first-child结构化伪类只用于当一个元素是另一个元素的第1个子元素时。
这个特定伪类很容易遭到误解，所以有必要举例来说明。
<div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div>
在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的 p 元素设置为粗体。第二个规则将作为某个元素第一个子元素的 li 元素变成大写。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
更多示例：http://www.w3school.com.cn/css/css_pseudo_classes.asp
:lat-child结构化伪类只用于当一个元素是另一个元素的最后一个子元素时。
注：IE6、IE7和IE8不支持:last-child结构化伪类，其他所有主流浏览器（包括IE9）都支持该伪类。
:nth-child(n)结构化伪类只用于当一个元素是另一个元素的第N个子元素时，如果括号中的值是3，那么将选择第三个子元素。
注：IE6、IE7和IE8不支持:nth-child(n)结构化伪类，其他所有主流浏览器（包括IE9）都支持该伪类。
注：除了IE6，所有主流浏览器都支持:first-child机构化伪类。
:lang 伪类使你有能力为不同的语言定义特殊的规则。
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>文字<q lang="no">段落中的引用的文字</q>文字</p> </body></html>
伪元素用来表示使用普通标记无法轻易修改的文档的特定部分。例如，伪元素可以用来修改某个段落首字母或者首行的格式。
CSS伪元素：http://www.w3school.com.cn/css/css_pseudo_elements.asp
|
属性 |
描述 |
CSS |
|
向文本的第一个字母添加特殊样式。 |
1 |
|
|
向文本的首行添加特殊样式。 |
1 |
|
|
在元素之前添加内容。 |
2 |
|
|
在元素之后添加内容。 |
2 |
说明：CSS3修改了伪元素的语法，即在每个伪元素前使用双冒号（::），例如,p::first-letter表示段落的首字母，而不是p:first-letter。
这种语法将伪元素于伪类区别开来，伪类使用单冒号语法，例如a:hover是一个伪类的引用。
然而，任何版本的IE都不支持这种形式，而是支持单冒号形式，而且主流浏览器也仍然支持单冒号形式，所以建议使用:first-letter和:first-line。
