【CSS】——选择器的学习

1.元素选择器

CSS中最常见的选择器就是元素选择器，即文档的元素就是最基本的选择器。如：

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

对html元素中的内容样式颜色变为black，对h1元素中的内容样式颜色变为blue，对h2元素中的内容样式颜色变为silver

2.选择器分组

选择器通过逗号（,）进行分组，同一组的选择器具有相同的样式，如：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

对body，h2，p，table，th，td，pre，strong，em元素中的内容样式都统一变成颜色为gray

选择器可以分组，同样地声明也可以分组，将同个选择器中的不同声明放在同一个组中，代码的阅读性会比较好，如：

h1 {font: 28px Verdana;}h1 {color: blue;}h1 {background: red;}

上面的写法和下面的写法是一致的，

h1 {font: 28px Verdana; color: white; background: black;}

3.通配符选择器

使用*作为通配符，作用是html文档中所有的元素都会进行匹配成功，即html文档中的所有元素样式都和给为通配符选择器中的样式，如：

* {color:red;}

4.类选择器

在元素标签中有class属性，可以通过class属性指定对某一具有相同class名称的元素进行样式修改，如：

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

在h1标签中将class属性的名称定义为important，在p标签中将class属性的名称定义为important，在下面的语句中定义了一个类选择器，该选择器能将具有相同class名称的标签元素中的内容样式改编为字体红色显示。

.important {color:red;}

再则类选择器能和元素选择器相结合，如：

p.important {color:red;}

上面的语句说明了要将段落p标签中具有class属性而且class的名称为important中的内容样式颜色改为red

CSS中还有多类选择器，即加多个类叠加，如：

.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}

第三个语句是两个类选择器，只有当标签中的class属性值包含这两个类时，标签中的元素的背景颜色才会变成silver。

5.id选择器

id选择器前面有一个#号，如：

#intro {font-weight:bold;}

当标签中的id属性值为intro是，标签中的元素字体会变粗。

id选择器与类选择器相似，但是也有区别，主要体现在下面的两个：

（1）id选择器只能在文档中使用一次

（2）不能使用id词列表：不同于类选择器，id选择器不能结合使用，因为id属性不允许以空格分隔词列表。

6.CSS属性选择器

（1）简单属性选择器：如果希望选择有某个属性的元素，而不论属性值是什么都可以使用简单属性选择器，则使用简单属性选择器，如：

*[title] {color:red;}

在所有的标签中，只要含有titile这个属性，而不论其属性值是什么，都能将该标签中的内容样式颜色变为red。

再者，简单属性值也可以和标签配合使用，如：

a[href] {color:red;}

该样式只对有href属性的a元素应用，而不是所有具有href属性的标签元素都可以应用该样式。

（2）根据具体属性值选择：除了选择拥有某些属性的元素，还可以进一步缩小选择的范围，只有选择有特定属性值的元素，如：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

上面的样式只作用与具有href属性，且属性的值为http://www.w3school.com.cn/about_us.asp的a元素才可以应用该样式。

7.后代选择器

如：

h1 em {color:red;}

该样式将作用域所有在h1元素中的em标签元素，不管其中已经嵌套了几层其他标签。这里的后代选择器要和子元素选择器区别开来。

8.子元素选择器

与后代选择器相比，子元素选择器只能选择为某元素子元素的元素，如：

h1 > strong {color:red;}

其中>是子元素选择器连接符。

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

上面的规则只能将第一个h1下面的strong元素变为red，但是第二个h1中的strong不受影响。

9.相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同的父元素。如：

h1 + p {margin-top:50px;}

其中的+是兄弟结合符

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

上面的样式只能将第一个p中的元素的外边距设置为50px，其他的p元素不受影响