CSS中常见选择器及其用法

CSS选择器

前言

之前介绍过HTML中常见标签的用法，以下将介绍CSS中不同选择器的使用。CSS是用来实现页面的样式规则，可以起到美化页面的作用。通过标签选择器可以选中对HTML中对应的标签等设置特定的样式，通过类选择器可以设置同一类元素的样式，以下将详细介绍。

1. 基础选择器

1.1 标签选择器

特点：能快速为同一类型的标签都选择出来，但是不能差异化选择。

实例：以下是对所有的p标签，div标签设置css样式，不会差异化。

 <style>
 p {
 color: red;
}
 div {
 color: green;
}
</style>

<p>p标签1</p>
<p>p标签2</p>
<div>div标签1</div>
<div>div标签2</div>

1.2 类选择器

特点: 可以差异化表示不同的标签，可以让多个标签的都使用同一个样式。
注意事项：

• 类名用 . 开头。
• 下方的标签使用 class 属性来调用。
• 一个类可以被多个标签使用, 一个标签也能使用多个类(类名用空格分割, 这种做法可以让代码更好复用)。
• 如果是长的类名, 可以使用 - 分割。
• 不要使用纯数字, 或者中文, 以及标签名来命名。

实例：以下就是对class为blue的div标签1设置样式，标签2无关

<style>
.blue {
color: blue;
}
</style>
<div class="blue">标签1</div>
<div class= "box red">标签2</div>

1.3 id选择器

id选择器与类选择器类似，它的特点如下：

• CSS 中使用 # 开头表示 id 选择器。
• id 选择器的值和 html 中某个元素的 id 值相同。
• html 的元素 id 不必带 # 。
• id 是唯一的, 不能被多个标签使用，而类选择器可以被多个标签使用不唯一。

实例：通过id选择器为ha对div标签设置样式

<style>
#ha {
color: red;
}
</style>
<div id="ha">哈哈哈</div>

1.4 通配符选择器

使用 * 的定义, 表示选取所有的标签，以下表示页面所有内容都是红色。

*{
 color：red；
}

2. 复合选择器

2.1 后代选择器

后代选择器又叫包含选择器（可以由任何基础选择器组合）， 选择某个父元素中的某个子元素，我们通常使用的列表标签就可以使用后代选择器定义css样式。

注意事项：

元素1 元素2{样式声明}

• 元素 1 和 元素 2 要使用空格分割
• 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

实例：以下是将li标签设为红色，同时后代标签也可以实现对“孙子” 的设置如以下

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>

<style>
ol li {
color: red;
}

//设置父子孙也有效
ul li a {
color: yellow;
}
//或者直接写孙子
ul a {
color: yellow;
}
</style>

2.2 子选择器

子选择器和后代选择器类似, 但是只能选择子标签。
注意事项：

元素1>元素2{ 样式声明}

• 使用大于号分割
• 只能选“亲儿子”, 不能“选孙子”元素

实例： 以下就只对连接1起效了，如果是后代选择器就会对两个链接都起效。

<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>

<style>
.two>a {
color: red;
}
</style>

2.3 并集选择器

用于选择多组标签
注意事项：

元素1， 元素2{样式声明}

• 通过 逗号 分割等多个元素.
• 表示同时选中元素 1 和 元素 2
• 任何基础选择器都可以使用并集选择器.
• 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

实例：将苹果和香蕉的颜色改成红色,将鸭梨和橙子也改成红色。

<div>苹果</div>
<h3>香蕉</h3>

<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>

<style>
div, h3{
color:red;
}
div,
h3,
ul>li {
color:red;
}
</style>

2.4 伪类选择器

1. 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

实例：其中实际开发中hover使用的较多

<a href="#">小猫</a>

<style>
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
} 
a:visited {
color: green;
} 
a:hover {
color: red;
} 
a:active {
color: blue;
}
</style>

2. ：force 伪类选择器
   实例：以下被选中的表单的字体就会变成红色

<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>

<style>
.three>input:focus {
color: red;
}
</style>