全局选择器
可以与任何元素匹配,优先级最低,一般用来做初始化。
代码:
<!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>Document</title>
<style>
*{
font-size: 30px;
color: greenyellow;
}
</style>
</head>
<body>
<p>hello</p>
<h3>world</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
元素选择器
举例:
p{
font-size: 50px;
color: blue;
}
代码:
<!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>Document</title>
<style>
*{
font-size: 30px;
color: greenyellow;
}
<!--选择元素p-->
p{
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<p>hello</p>
<h3>world</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
再比如说,我想让“hello”中的“ell”变成另一种颜色,可用<span>标签把“ell”围起来,然后给<span>一个标签选择器。
<!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>Document</title>
<style>
*{
font-size: 30px;
color: greenyellow;
}
p{
font-size: 50px;
color: blue;
}
span{
font-size: 50px;
color: brown;
}
</style>
</head>
<body>
<p>h<span>ell</span>o</p>
<h3>world</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
提示
① 所有的标签都可以是选择器。
② 无论这个标签被藏得有多深都一定能够选上。
③ 选择的是所有,而不是一个。
类选择器
规定用圆点“.”来定义,针对你想要的所有标签使用。
优点:灵活
例如:想让无序列表中A换个颜色。
<!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>Document</title>
<style>
<!--定义选择器类型-->
.one-class{
color: lightcoral;
}
</style>
</head>
<body>
<p>h<span>ell</span>o</p>
<h3>world</h3>
<ul>
<li class="one-class">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
class属性的特点:
① 类选择器可以被多种标签使用
② 类名不能以数字开头
③ 同一个标签可以使用多个选择器,用空格隔开
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>Document</title>
<style>
#text1{
color: red;
font-size: 30px;
}
#text2{
color: red;
font-size: 30px;
}
.t1{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<!--ID名字只能使用一次,不可重复-->
<p id="text1">hello1</p>
<p id="text2">hello2</p>
<!--class可重复-->
<p class="t1">hello3</p>
<p class="t1">hello4</p>
</body>
</html>
合并选择器
语法:选择器1,选择器2...{}
作用:提取共同的样式,减少重复代码。
<!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>Document</title>
<style>
/* h3{
color: green;
background-color: lightgoldenrodyellow;
}
p{
color: green;
background-color: lightgoldenrodyellow;
} */
/* 以上代码重复度高,可以用合并选择器 */
h3,p{
color: green;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<h3>文本1</h3>
<p>文本2</p>
</body>
</html>
<!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>Document</title>
<style>
.t1,.t2{
color: green;
background-color: lightgoldenrodyellow;
}
#t1,#t2{
color: blue;
background-color: lightblue;
}
</style>
</head>
<body>
<h3 class="t1">文本1</h3>
<p class="t2">文本2</p>
<h3 id="t1">文本1</h3>
<p id="t2">文本2</p>
</body>
</html>
由此可知,合并选择器对ID选择器、class选择器均有效。
选择器的优先级
从高到低:行内样式>ID选择器>类选择器>元素选择器