javascript
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS選擇器
在一個頁面中，必不可少的就是css樣式，css樣式全都寫在style標簽中，在使用css時，我們可以用的css選擇器非常之多，所以css選擇器的分類也很多，但是基本上可以統計分為兩類：基礎選擇器+其他選擇器
基礎選擇器
基礎選擇器中包含了五種：通配符選擇器、元素選擇器、類選擇器、ID選擇器
通配符選擇器
顧名思義，通配符選擇器用于頁面中所有的元素，常用于定義頁面的初始化效果
語法格式：
* {padding: 0;margin: 0; }* 代表所有元素，通配符選擇器一般寫在所有CSS的最前面。
元素選擇器
元素選擇器也被稱為標簽選擇器，主要應用在修改某一標簽的樣式，作用于全局的該標簽，所以實際應用需要根據需求，謹慎考慮是否使用。
語法格式：
div {width: 300px;height: 200px;background-color: red;}span {color: blue;}h2 {color: chartreuse;}用法即：標簽 {屬性名：屬性值;}
類選擇器
類選擇器可以說是調整樣式時最常用的選擇器了。只要標簽中定義了class名字，即可被css的類選擇器調用
注：使用該選擇器，對應的標簽中一定要定義class名字
調用時選擇器時，需要在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>/* 在style中先寫一個 "." 再接著寫class名字 */.box {width: 300px;height: 200px;background-color: chartreuse;font-size: 20px;}</style> </head> <body><!-- div中定義了class名字為box --><div class="box">我的class名字是box</div> </body> </html>效果圖：
ID選擇器
ID選擇器與class選擇器很類似，同樣需要在標簽中定義id名字，調用時將“.”更換為“#”
tip：在后期學習及實際運用中，class常用于修改樣式，id常用于js調用
語法格式：
<!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>/* 在style中先寫一個 "#" 再接著寫id名字 */#box {width: 300px;height: 200px;background-color: chartreuse;font-size: 20px;}</style> </head> <body><!-- div中定義了id名字為box --><div id="box">我的id名字是box</div> </body> </html>效果圖：
屬性選擇器
屬性選擇器，有一點點像元素選擇器（標簽選擇器）
<!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>/* 在style中先寫一個 "[]" 在里面寫屬性名 *//*本例子中的屬性選擇的是class*/[class] {width: 300px;height: 200px;background-color: chartreuse;font-size: 20px;}</style> </head> <body><!-- 屬性選擇器將會選取[]里標簽 ，本例子中會找到包含class屬性的標簽--><div id="box1">我的id名字是box1</div><div class="box2">我的calss名字是box2</div><div>我沒有id，也沒有class</div> </body> </html>效果圖：
其他選擇器
其他選擇器也被稱為擴展選擇器，其意義在于與基礎選擇器分開，個人感覺在記憶時，只需要記住各種選擇器的名稱及用法即可，是基礎還是拓展，并無大礙
后代選擇器
后代選擇器，又稱為包含選擇器
語法格式：第一個元素+空格+第二個元素，空格在這里可以翻譯為，……后的……，在這里就翻譯為div后的a標簽，所以，只要是被div包含的a標簽都會變色
<!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>/* 第一個元素+空格+第二個元素 */div a {background-color: chartreuse;font-size: 20px;}</style> </head> <body><div><a href="#">我會變色</a><!-- 請大家記住這里有個span --><span><a href="#">我也變色</a></span></div> </body> </html>效果圖：
子類選擇器
子類選擇器與后代選擇器很容易搞混，后代選擇器的后代可以是很多層之后的后代，而子類選擇器選擇的是，第一個元素后的第一層后代。
可以這么理解：
第一個元素是第一代祖先，
那么后代選擇器選的就是它的所有符合條件的后代，
而子類選擇器，只能選擇它的兒子這一代。
語法格式：第一個元素+右括號+第二個元素
<!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>/* 第一個元素+>+第二個元素，中間不要接空格 */div>a {background-color: chartreuse;font-size: 20px;}</style> </head> <body><div><a href="#">我會變色</a><!-- 這時span和上面的a屬于同一代 --><span><!-- span里面的a標簽與上面的a不屬于同一代，所以不變色 --><a href="#">我不變色</a></span></div> </body> </html>效果圖：
兄弟元素選擇器
兄弟元素選擇器有兩種：相鄰兄弟選擇器（+）、通用兄弟選擇器（~）
區別在于：
相鄰兄弟選擇器可以選擇到第一個元素的后一個兄弟元素
通用兄弟選擇器可以選擇到第一個元素的后面所有兄弟元素
相鄰兄弟選擇器語法：
<!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>/* 第一個元素+“+”+第二個元素，中間不要接空格 */div+span {display: block;width: 200px;height: 200px;background-color: chartreuse;}</style> </head> <body><div>div</div><span>第一個span</span><span>第二個span</span> </body> </html>通用兄弟選擇器語法：
<!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>/* 第一個元素+“~”+第二個元素，中間不要接空格 */div~span {display: block;width: 200px;height: 200px;background-color: chartreuse;}</style> </head> <body><div>div</div><span>第一個span</span><span>第二個span</span> </body> </html>偽類選擇器
注意： 如果同時存在link、visited、hover，那么a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
注意： 如果同時存在a:hover、active，那么a:active 必須被置于 a:hover 之后，才是有效的。
注意：偽類的名稱不區分大小寫。
常用的有兩個：
::before（在指定對象的前端插入內容）
::after（在指定對象的尾部添加內容）
一般都需要結合content這個樣式一起使用，用于添加文字
語法格式：
<!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>a::before{content: "我是before，在前面添加，";}a::after{content: "，我是after，在后面添加";}</style> </head> <body><a href="#">這是個a標簽</a> </body> </html>總結
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复