CSS3中的各類選擇器的使用（有例項）
在css中，選擇器是一種模式，用於選擇需要新增樣式的元素。
注意：每行最好只寫一個樣式，而且末尾要使用;分隔。
也就是對宣告分組，一定要在各個宣告的最後使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。
基本選擇器
選擇器的優先順序：
id選擇器 > 類選擇器 > 元素選擇器 > 通用選擇器
行內樣式 style屬性中設定的樣式 ，權重最高，優先順序最高。
通用選擇器
選擇所有
* {
屬性名：屬性值;
......
}
/*下面的規則可以使文件中的每個元素都為紅色*/
* {
color: red;
}
元素選擇器
又叫標籤選擇器，選擇指定的元素/標籤
元素名稱 {
屬性名：屬性值;
......
}
div {
width: 100px; /*div的寬度*/
height: 100px; /*div的高度*/
background-color: blue;
}
ID選擇器
選擇指定id屬性值的元素。使用 #
id定義規則：以字母、數字、下劃線、中劃線組成，不要以數字開頭。id值保持唯一
#id屬性值 { 屬性名：屬性值; ...... } #div1 { width: 100px; /*div的寬度*/ height: 100px; /*div的高度*/ background-color: blue; }
類選擇器
class類選擇器，選擇設定指定class屬性值的元素，使用 .
.class屬性值 {
屬性名：屬性值;
......
}
.cls1 {
font-weight: bold; /*字型粗細*/
}
分組選擇器
當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，我們可以通過在多個選擇器之間使用逗號分隔的,來統一設定元素樣式。
可以將任意多個選擇器分組在一起，對此沒有任何限制。只需要各個選擇器之間使用,分隔即可。
選擇器1,選擇器2,選擇器3,....{ 屬性名：屬性值; ...... } /*為div標籤和p標籤統一設定字型為紅色的樣式*/ div,p{ color:red; }
例項中應用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本選擇器</title>
<style>
* {
/*字型顏色*/
color: orange;
}
div {
width: 100px; /*div的寬度*/
height: 100px; /*div的高度*/
background-color: blue;
}
#div1 {
color: #FF0000;
}
.cls1 {
font-weight: bold;
}
<!--為div標籤和p標籤統一設定border樣式-->
#div1, .cls1, p {
/*邊框 邊框的粗細 邊框的風格 邊框的顏色*/
border: 1px solid #0000FF;
}
</style>
</head>
<!--內容區域：瀏覽器可見內容-->
<body>
<div class="cls1">div1</div>
<div id="div1" class="cls1">div2</div>
<div class="cls1">div3</div>
<p>p</p>
</body>
</html>
組合選擇器
css組合選擇器說明了兩個選擇器直接的關係。
在css中包含了四種組合方式：
後代選擇器（以空格分隔）：選擇指定元素的所有的後代元素
子元素選擇器（以大於號分隔）：選擇指定元素的第一代元素
相鄰兄弟選擇器（以加號分隔）：選擇指定元素的相鄰的下一個指定元素（只會向下找一個）
普通兄弟選擇器（以波浪線分隔）：選擇指定元素後的指定同級元素（只會向下找）
後代（派生）選擇器
用於選擇指定標籤元素下的後輩元素，以空格分隔
選擇器1 選擇器2 {
.....
}
/*匹配class="food"標籤裡面的所有的li*/
.food li {
/*邊框 邊框的粗細 邊框的風格 邊框的顏色*/
border: 1px solid red;
}
子元素選擇器
用於選擇指定標籤元素的所有第一代子元素，以大於號分隔
選擇器1 > 選擇器2 {
.....
}
#d > div {
border: 1px solid red;
}
相鄰兄弟選擇器
可選擇緊接在另一元素後的元素，且兩者有相同父元素。以加號分隔
選擇器1 + 選擇器2 {
.....
}
#d + div {
border: 1px solid red;
}
普通兄弟選擇器
選擇緊接在另一元素後的所有元素，且兩者有相同父元素。以波浪線分隔
選擇器1 ~ 選擇器2 {
.....
}
#d ~ div {
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組合選擇器</title>
<style type="text/css">
.food li {
border: 1px solid red;
}
.food >li {
border: 1px solid red;
}
#d + div {
color: #FF0000;
}
#t ~ li {
color: blue;
}
</style>
</head>
<!--內容區域：瀏覽器可見內容-->
<body>
<h2>食物</h2>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
<div id="d">
相鄰兄弟選擇器1
<ul>
<li>開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
</ul>
</div>
<div>
相鄰兄弟選擇器2
</div>
<div>
相鄰兄弟選擇器3
</div>
<p>
相鄰兄弟選擇器4
</p>
<div>
普通兄弟選擇器1
<ul>
<li id="t">開心麻花</li>
<li>賈玲</li>
<li>宋小寶</li>
<li>沈騰</li>
<li>王寧</li>
</ul>
</div>
</body>
</html>
屬性選擇器
格式：標籤名[屬性名=‘屬性值’]{}，注意：屬性值用' '包圍
作用：指定某個屬性為指定的元素樣式
程式碼測試：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style type="text/css">
/* a標籤 */
a[href='cssDemo01.html']{
color:green;
}
/* 文字框 */
input[type='text']{
color:orange;
}
/* submit按鈕 */
input[type='submit']{
background-color:lightblue;
}
</style>
</head>
<body>
<a href="cssDemo01.html">cssDemo01</a><br>
<a href="cssDemo02.html">cssDemo02</a><br>
<input type="text" value="123456"><br>
<input type="submit" value="確定"><br>
</body>
</html>
偽類選擇器
格式：標籤名：偽類選擇器{ }，此處主要以a標籤為例
-
未訪問狀態：link
-
訪問過狀態：visited
-
懸停狀態：hover
-
點選狀態：active
作用：在指定元素的不同狀態時出現的不同樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style type="text/css">
/* 未訪問狀態 */
a:link{
font-size:20px;
color:red;
}
/* 訪問過狀態 */
a:visited{
font-size:30px;
color:yellow;
}
/* 懸浮狀態 */
a:hover{
font-size:40px;
color:green;
}
/* 點選狀態 */
a:active{
font-size:50px;
color:pink;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">我是a標籤:點選進入百度</a>
</body>
</html>
顯示效果：
https://www.cnblogs.com/XiaoCui-blog/p/14974836.html
https://blog.csdn.net/m0_64694920/article/details/124101215
https://blog.csdn.net/SIMBA1949/article/details/79001226
https://www.cnblogs.com/hider/p/11614688.html