CSS中常见选择器及其用法
文章目录
- CSS选择器
- 前言
-
- 1. 基础选择器
-
- 1.1 标签选择器
- 1.2 类选择器
- 1.3 id选择器
- 1.4 通配符选择器
- 2. 复合选择器
-
- 2.1 后代选择器
- 2.2 子选择器
- 2.3 并集选择器
- 2.4 伪类选择器
CSS选择器
前言
之前介绍过HTML中常见标签的用法，以下将介绍CSS中不同选择器的使用。CSS是用来实现页面的样式规则，可以起到美化页面的作用。通过标签选择器可以选中对HTML中对应的标签等设置特定的样式，通过类选择器可以设置同一类元素的样式，以下将详细介绍。
1. 基础选择器
1.1 标签选择器
特点：能快速为同一类型的标签都选择出来，但是不能差异化选择。
实例：以下是对所有的p标签，div标签设置css样式，不会差异化。
<style>
p {
color: red;
}
div {
color: green;
}
style>
<p>p标签1p>
<p>p标签2p>
<div>div标签1div>
<div>div标签2div>
1.2 类选择器
特点: 可以差异化表示不同的标签，可以让多个标签的都使用同一个样式。
注意事项：
- 类名用 . 开头。
- 下方的标签使用 class 属性来调用。
- 一个类可以被多个标签使用, 一个标签也能使用多个类(类名用空格分割, 这种做法可以让代码更好复用)。
- 如果是长的类名, 可以使用 - 分割。
- 不要使用纯数字, 或者中文, 以及标签名来命名。
实例：以下就是对class为blue的div标签1设置样式，标签2无关
<style>
.blue {
color: blue;
}
style>
<div class="blue">标签1div>
<div class= "box red">标签2div>
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>aaali>
<li>bbbli>
<li>cccli>
ul>
<ol>
<li>dddli>
<li>eeeli>
<li>fffli>
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="#">链接1a>
<p><a href="#">链接2a>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 伪类选择器
- 链接伪类选择器
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>
- ：force 伪类选择器
实例：以下被选中的表单的字体就会变成红色
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
div>
<style>
.three>input:focus {
color: red;
}
style>