css(二)之选择器

选择器

在网页中需要选择相应的标签进行样式的修改，就需要对标签进行定位，而选择器就是为了定位标签元素而生的。

基础选择器

基础选择器是最简单的选择器。

标签选择器

使用html名称作为选择器，按照标签名称分类，为页面中某一类标签统一css样式。

div {
	color:red;
}

类选择器

想差异化选择不同标签，需要使用类选择器。

.类名 {
	color:red;
}

例子：
定义类选择器

.red {
	color:red;
}

html标签中对应class属性相同的标签会变化。

<div class="red">
变红色啦
</div>

多类名时中间用空格隔开。

<div class="red green">
变色啦
</div>

id选择器

给特定id的标签使用指定样式。
例子：
定义id选择器

#red {
	color:red;
}

html标签中对应class属性相同的标签会变化。

<div id="red">
变红色啦
</div>

通配符选择器

所有标签修改样式。

* {
	color:red;
}

属性选择器

修改带有指定属性的html标签。

标签[属性] {
	color:red;
}

标签[属性=属性值] {
	color:red;
}

例子：

input[value] {
	color:red;
}

<input type="text" value="waiting"></input>
<input type="text"></input>

复合选择器

复合选择器建立在基础选择器之上的，对于基础选择器进行组合的。
选择器分为以下4种：

• 后代选择器
• 子选择器
• 并集选择器
• 伪类选择器

后代选择器

后代选择器又名包含选择器，可以选择父元素里面的子元素，其语法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成外层标签的后代。
语法

元素标签1 元素标签2 ... {
	color:red;
}

这里的元素标签可以使用选择器定位。
例子：
现有html如下：

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

有个需求就是假如要使ol中li变成红色，其他不变。这个需求用后代选择器再适合不过了。

ol li{
	color:red;
}

子选择器

只能选择作为某一元素最近一级的子元素，就是选亲儿子的元素。
语法

元素1>元素2 ... {
	color:red;
}

例子：

<div class="ok">
<a>aaa</a>
<p>
<a>aaa</a>
</p>
</div>

如果使用父选择器

.ok a{
	color:red;
}

那么所有a标签内的文字都会变红。
如果使用子选择器

.ok>a{
	color:red;
}

只有亲儿子中a标签才会变红。

并集选择器

并列修改。

元素1,元素2 {
	color:red;
}

将元素1和元素2的标签并列修改为红色。

伪类选择器

用于向某些选择器添加特殊效果，比如给链添加特殊效果。

链接伪类选择器

• a:link：选择所有未被访问的链接。
• a:visit：所有已被访问的链接
• a:hover：选择鼠标指针位于其上的链接。
• a:active：选择活动链接。

focus伪类选择器

用于获取标点的表单元素，更改样式。

input:focus{
	background-color:yellow;
}