大家好，欢迎来到IT知识分享网。
首先我们要理解什么是选择器？选择器是用来做什么的？我们都知道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 #one.one
div#one
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 #one.one{ 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> 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 选择
（类和伪类选择器会在下一篇博客做详细说明）
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31869.html
