CSS选择器分类

上一节练习题：写两个各10条数据的列表，第一个列表字体是16px，第二个列字体大小是20px。实现方法很多，但是根据现有知识写出来代码会很多，所以今天我们通过学习css选择器来简化你的代码。

简单选择器

根据标签名、id、类名来选取。id：是标签id的属性值，类名：是标签class的属性值。

• 元素选择器：根据标签名来选择html元素，如p、h1、div、input等待。

p{
 font-size:16px
}

• id选择器：用于选择一个唯一元素，css使用的时候前边加 # ,后边跟id值。

<div id="par"></div>

#par{
 font-size:16px;
}

注意：id名称不能以数字开头。

• 类选择器：选择有特定class属性的html元素，使用时在前边加 . 符号，后边跟类名。

<div class="par"></div>

.par{
 font-size:16px;
}

还可以指定特定的某个元素，如：下边实例指定的是p标签上的元素。

<div class="par"></div>
<p class="par"></p>

p.par{
 font-size:16px;
}

通用选择器（*）:选择页面上的所有html元素，设置的样式会影响全部元素。

组合类选择器

css有四种不同的组合器：

• 后代选择器（空格）
• 子选择器（>）
• 相邻兄弟选择器（+）
• 通用兄弟选择器（~）

实例：<div><p>内容</p></div>

后代选择器：div p{ font-size:16px }

子选择器：div > p{ font-size:16px }

相邻兄弟选择器：div + p{ font-size:16px }

通用兄弟选择器：div ~ p{ font-size:16px }

伪类选择器

可以设置鼠标经过，元素获取焦点，已访问过和未访问链接等设置不同样式。

• a:hover 鼠标悬停在链接上
• a:link 未访问的链接
• a:visited 已访问的链接
• a:active 已选择的链接
• div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素，如：

div:hover p{ font-size:20px } 

鼠标停在div上时，子元素p中文字变为20像素。

伪元素选择器

伪元素用于设置元素指定部分的样式，如元素首行、之前、之后等插入内容。

如给div元素内的内容之后加一个对号，我们可以不用图片，直接使用伪元素，如：

div::after{
 content: '\2714';
 color: #fff;
}

div::before{ } 在元素之前加入内容

p::first-line 文本的首行添加样式或内容

p::first-letter 文本的首字母添加样式或内容

属性选择器

为带有特定属性 [attribute] 的html元素设置样式。

• a[target]{ background:red } /* 设置背景为红色 */，带有target属性的a标签
• a[href="http:baidu.com"]，选带有href="http:baidu.com"的a标签
• [title ~= 'flower' ]{ }，选取title属性包含flower的所有元素
• [class|="top"] { }，选取class属性以top开头的元素，必须是完整且唯一的单词，或者以 - 分隔开。
• [class^="top"]{ }，选取class属性以top开头的元素。
• [class$="top"]{ }，选取class属性以top结尾的元素。
• [class*="top"]{ }，选取class属性包含top的元素。

css选择器很多，css3也新增了很多选择器，我们后期在讲css3的选择器。上述讲的都是一些常见选择器，自己可在w3c中查看全部。