什么是选择器？选择器都有什么种类？
⾸先我们要理解什么是选择器？选择器是⽤来做什么的？我们都知道html它是超⽂本标记语⾔，是没有样式的，我们要给html添加样式就要⽤到css，但是我们怎样去知道要给哪⼀个元素添加样式呢？这个时候就需要有选择器来去选择需要添加样式的标签、元素等等，这也使得选择器分成了不同的类。
1.标签选择器：通过标签名选择⼀类元素（标签选择器的结构：标签名{css语句}）
例：div{}、span{}、p{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color: salmon;
border: 1px solid black;
text-align: center;
}
p{
font-style: italic;
}
span{
font-size: 60px;
}
</style>
</head>
<body>
<div>
hello world! <br>
<p>hello  world!<span>你好呀世界！</span></p>
</div>
</body>
</html>
2.id选择器：通过id属性选择⼀个元素（id选择器的结构：#id属性名{css语句}）
#one    （id=one）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div{
width: 500px;
height: 500px;
background-color: salmon;
border: 1px solid black;
text-align: center;
}
#p{
font-size: 60px;
}
</style>
</head>
<body>
<div id="div">
hello world! <br>
<p id="p">hello  world!<span id="p">你好呀世界！</span></p>
</div>
</body>
</html>
3.类选择器：通过class属性选择⼀类元素（类选择器的结构：.class属性名{css语句}）
.one        （class='one'）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
background-color: lawngreen;
.one{
background-color: seagreen;
font-style: italic;
}
.two{
background-color: slateblue;
font-size: 70px;
}
</style>
</head>
<body>
<ul class="one">
<li>aaaaaaaaaa</li>
<li>bbbbbbbbbb</li>
<li>cccccccccc</li>
</ul>
<ul class="two">
xixixi
<li>rrrr</li>
<li>tttt</li>
<li>yyyy</li>
</ul>
<ul class="one">
<li>qqqqqqq</li>
<li>wwwwwww</li>
<li>bbbbbbb</li>
</ul>
</body>
</html>
4.普遍选择器：所有元素都会被选中（结构：*{}）
*所有
选中所有⼀般不会使⽤，⽽且选中所有后，若其后还有其他样式将会把它覆盖（就近原则）（上例中有该⽤法）
5.后代选择器：
空格：选择所有后代元素
>：选择直接⼦元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table tr{
background-color: lawngreen;
}
div>p{
background-color: mediumblue;
}/*改变了所有的<p>⽽且<p>中的<span>也改变了*/
div>span{
background-color: lightpink;
}/*没有改变<p>⾥⾯的<span>改变了<p>外⾯的<span>  选择的是直接⼦元素*/
</style>
</head>
<body>
<table>
<div>
hello <br>
<p>world  <br>
<span>喜喜</span>
</p>
<p>看看你改变不改变</p>
<span>那你呢</span>
</div>
<tr>
<td>dsvfv</td>
<td>fdsfd</td>
<td>fdsvd</td>
<td>sfdsd</td>
</tr>
<tr>
<td>你好</td>
<td>谢谢</td>
<td>再见</td>
<td>抱歉</td>
</tr>
</table>
</body>
</html>
6.兄弟选择器
+：选择当前元素之后的⼀个元素
~：选择当前元素之后的所有元素
测试时注意覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
border: 1px solid red;
}
div~p{
border:2px solid green;
}
div+p{
border:1px solid black;
}
</style>
</head>
<body>
<div id="obn">
<p>hhhhhhhhhhhhhh <span>123</span></p>
<p>xixixixiixiixiixi</p>
</div>
<p>fsgrv;dhajoewdisdkjfocidsjvoiefhkd</p>
<p>覅绿化我是我欸的⼥警</p>
</body>
</html>
7.组合选择器(实际开发中不要嵌套太多)
div #
div#one
<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div #{
background-color: blue;
font-size: 70px;
}
</style>
</head>
<body>
<table>
<div>
hello <br>
<p id="one" class="one">world  <br>
<p class="one">svrvsrv</p>
</p>
<p id="one" class="two">看看你改变不改变</p>
<span>那你呢</span>
</div>
</table>
</body>
</html>
8.多选择器（元素、类、属性等等组合在⼀起选择）
div,p,#one{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div,#ds,.o{
background-color: blue;
}
</style>
</head>
<body>
<table>
<div>
hello <br>
<p>world  <br>
<span>喜喜</span>
</p>
<p>看看你改变不改变</p>
<span>那你呢</span>
</div>
<tr>
<td id="ds">dsvfv</td>
<td>fdsfd</td>
<td>fdsvd</td>
<td>sfdsd</td>
</tr>
<tr>
<td class="o">你好</td>
<td>谢谢</td>
<td>再见</td>
<td class="o">抱歉</td>
</tr>
</table>
</body>
</html>
9.属性选择器：根据元素的属性选择⼀类元素
[id]：具有id属性的
[id='one']:id属性为one的
[class~='one']  //英⽂波浪线
具有class属性并且属性值之⼀等于one
[class^='one']
具有class属性并且属性值以one开头
[class$='one']
具有class属性并且属性值以one结尾
[class*='one']
具有class属性并且属性值中包含one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[id]{
background-color: blue;
}
[class='o']{
background-color: red;
}
[class*='o']{
background-color: yellow;
}
[class~='o']{
background-color: brown;
}
</style>
</head>
<body>
<table>
<div>
cssclass属性hello <br>
<p>world  <br>
<span>喜喜</span>
</p>
<p>看看你改变不改变</p>
<span>那你呢</span>
</div>
<tr>
<td id="ds">dsvfv</td>
<td class="pq d o">fdsfd</td>
<td>fdsvd</td>
<td>sfdsd</td>
</tr>
<tr>
<td class="o">你好</td>
<td class="pqo">谢谢</td>
<td>再见</td>
<td class="o">抱歉</td>
</tr>
</table>
</body>
</html>
伪类选择器：（结构：伪类名称{}）像类⼀样，但是是浏览器规定的⼀些种类元素:firt-child
:last-child
:nth-child(num/odd/even)
(以上三个较其他⽐较常⽤)
:first-of-type
:last-of-type
元素状态相关的伪类选择器
:
link  未被访问的状态
:visited  已访问过的状态
:hover  ⿏标悬停的状态
:active  活动的状态（⿏标按下的状态）
（以上4个常⽤）
：focus  聚焦的状态
：checked  ⽤户选中的单选按钮或者多选按钮
：default  默认选中的单选按钮或者多选按钮
：enabled  、：disabled  可⽤的表单控件、禁⽤的表单控件
：valid  、：invalid    验证通过的、不验证通过的
：required 、：optional  必填的和选填的
:
in-range 、 :out-of-range  在范围内的、不在范围内的
伪元素选择器（结构：：伪元素名称）
：：first-letter  第⼀个元素
：：first-line  第⼀⾏
：：before  在当前元素之前添加东西（属性  content：''/url()）
：：after  在元素之后添加东西
：：selection  选择
（类和伪类选择器会在下⼀篇博客做详细说明）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。