什么是选择器：选中元素的一种方式
1、元素选择器
通过标签名选中元素
作用：根据标签名，将同一种标签元素选择出来
标签名 {
属性: 值
}
2、class选择器
需要给元素设置class名
作用
选择某一类，设置了特定的class名的元素
.类名 {
属性: 值
}
特点：
a、可以给多个元素设置同一个class名
b、可以给一个元素设置多个class名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
color: red;
}
.line{
text-decoration: underline;
}
</style>
</head>
<body>
<!-- p*5{$} 回车生成1~5的p标签-->
<p class="one line">中南大学</p>
</body>
</html>
class选择器可以自由的选择页面上的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
}
.font{
font-size: 50px;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p class="font">3</pclass>
<p>4</p>
<p>5</p>
</body>
</html>
3、id选择器
特点：
a、每个id都是唯一的
b、每个元素只能设置一个id
#id名 {
属性: 值
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#one{
color: red;
}
#two{
text-decoration: underline;
}
</style>
<body>
<p id="one">hello word</p>
<p id="two">hello word</p>
</body>
</html>
4、后代选择器
① 选中亲儿子，便改变其样式。不能改变孙子的样式。
.类名>标签{
}
② 选中类名之后的所有子孙代
.类名 标签{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav>p{
color: red;
}
.nav p{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="nav">
<p>hello word</p>
<p>hello word</p>
<ul>
<li>
<p>hello word</p>
</li>
<li>
<p>
hello word
</p>
</li>
</ul>
</div>
</body>
</html>
结果：
.nav p:first-child
.nav p:last-child
.nav p:nth-child(odd)//选中奇数项
.nav p:nth-child(even)//选中偶数项
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav p:first-child{
color: red;
}
.nav p:last-child{
color: blue;
text-decoration: underline;
}
/* odd选中所有奇数项 */
.nav p:nth-child(odd){
font-size: 50px;
}
/* even选中所有的偶数项 */
.nav p:nth-child(even){
background-color: aqua;
}
</style>
</head>
<body>
<div class="nav">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</body>
</html>
结果：
5、选择器的权重
（1）class选择器的权重>元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
color: red;
}
.item{
color: green;
}
</style>
</head>
<body>
<ul>
<li class="item">a</li>
</ul>
</body>
</html>
结果：
（2）后代选择器的权重>单个class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
color: red;
}
.item{
color: green;
}
ul .item{
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="item">a</li>
</ul>
</body>
</html>
结果：
（3）嵌套越深权重越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li{
color: red;
}
.item{
color: green;
}
ul .item{
color: blue;
}
body ul .item{
color: #333;
}
</style>
</head>
<body>
<ul>
<li class="item">a</li>
</ul>
</body>
</html>
结果：
