javaEE 初阶 — CSS 选择器
文章目录
- CSS 选择器
-
- 1.标签选择器
- 2.类选择器
- 3.ID 选择器
- 4.后代选择器
- 5.子选择器
- 6.并集选择器
- 7.伪类选择器（复合选择器的特殊用法）
CSS 选择器
1.标签选择器
标签选择器 是在大括号的前面写上标签的名字，此时意味着会选中当前页面中的所有指定标签。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
div {
font-size: 30px;
color: green;
}
style>
head>
<body>
<div>
这是一个div
div>
<div>
这是一个div
div>
<div>
这是一个div
div>
body>
html>
2.类选择器
标签选择器 只能针对所有的指定标签，如果实际业务要求虽然是同一种的标签，但是属性不一样，此时就不适合了。
因此，我们可以使用 类选择器。
可以创建一个 CSS 类 ，手动指定哪些元素应用这个类。
此处所说的类，不是指面向对象编程中的那个类，而是把一组 CSS 属性起了个名字。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
.one {
color: red;
}
.two {
color: green;
}
.three {
color: blue;
}
style>
head>
<body>
<div class="one">
这是第一个div
div>
<div class="two">
这是第二个div
div>
<div class="three">
这是第三个div
div>
body>
html>
定义类的时候，需要使用 . 来开头，引用这个类的时候，需要通过 class 属性 = “类名” ，不需要带 .。
一个类可以被一个元素引用，也可以被多个元素引用。
一个元素可以引用一个类，也可以引用多个类。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
.one {
color: red;
}
.two {
color: green;
}
.three {
color: blue;
}
.four {
font-size: 40px;
}
style>
head>
<body>
<div class="one four">
这是第一个div
div>
<div class="two">
这是第二个div
div>
<div class="three">
这是第三个div
div>
body>
html>
可以看到第一个 div 在引用了 four 类之后，字体产生了效果。
第一个div在引用了 color 样式之后，又引用了 font-size 样式。
最终的效果就是两个样式叠加到一起的效果。
3.ID 选择器
html 页面中的每一个元素，都是可以设置一个唯一的 id 作为身份的标识。
给元素安排好 id 之后，就可以通过 id 来选中对应的元素了。
类选择器是可以让多个元素应用同一个类的，但是 id 选择器则只能针对唯一的元素生效。
因为一个页面里面只有唯一的 id 。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
#oneDiv {
color: red;
}
#twodiv {
color: green;
}
style>
head>
<body>
<div id="oneDiv">
这是一个div
div>
<div id="twoDiv">
这是另一个div
div>
body>
html>
可以看到生成了效果。
id 选择器是使用 # 来定义 id 的，在大括号里面写下想要生成的效果。
4.后代选择器
后代选择器是一个 复合选择器，就是把多个简单的基础选择器组合一下（可以是标签、类、id 选择器）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
ul li {
color: red;
}
style>
head>
<body>
<ol>
<li>aaali>
<li>bbbli>
<li>cccli>
ol>
<ul>
<li>aaali>
<li>bbbli>
<li>cccli>
ul>
body>
html>
ul li 的含义就是 先找到页面中的所有 ul，然后到这些 ul 中里再找所有的 li 。
需要注意的是 li 只要是 ul 的后代即可，不一定非的是 “子元素”。
这里的后代指的是 子元素、孙子元素、重孙子元素…
上述的代码只会选中以下部分对齐添加颜色修改。
<ul>
<li>aaali>
<li>bbbli>
<li>cccli>
ul>
5.子选择器
子选择器 也是把多个简单的基础选择器组合，只是找匹配的子元素，不找孙子元素之类的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
.one a {
color: red;
}
style>
head>
<body>
<div class="one">
<a href="#">连接1a>
<p>
<a href="#">连接2a>
p>
div>
body>
html>
上述代码中的第一个 a 标签就是一个子元素，p 标签里的第二个a 标签就是孙子元素。
如果是 后代选择器 会把两个 a 标签里的内容全部设置成对应的属性。
如果是 子选择器 则会只有 子元素 会更改。
<style>
.one > a {
color: red;
}
style>
图中的蓝色是超链接本身默认的颜色。
6.并集选择器
并集选择器 是多组选择器应用了同样的样式。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
.one{
color: red;
}
.two, .three{
font-size: 40px;
}
style>
head>
<body>
<div class="one">
<a href="#" class="two">连接1a>
<p>
<a href="#" class="three">连接2a>
p>
div>
body>
html>
7.伪类选择器（复合选择器的特殊用法）
伪类选择器指的是选中某个元素的某个特定的状态。
比如 :hover 鼠标悬停时候的状态。
:active 鼠标按下的时候的状态。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我真帅title>
<style>
.one:hover{
color: red;
font-size: 40px;
}
style>
head>
<body>
<div class="one">
这是一个div
div>
body>
html>
:hover 会使鼠标悬停上去的时候发生上述的变化，也就是变成红色字加上变大为 40 像素。
:active 则会在鼠标点击的时候反生变化，
<style>
.one:active{
color: green;
font-size: 40px;
}
style>
上述代码会变为 40 像素的绿色字体。