css樣式學習【三】
阿新 • • 發佈：2020-12-12
技術標籤：# css學習
複合選擇器
由兩個或多個基礎選擇器組成
後代選擇器【包含選擇器】
元素1 元素2 {樣式宣告} 表示 選擇元素1裡面的所有元素2（後代元素）
注意點：
- 元素1與元素2用空格隔開
- 元素1是父級，元素2是子級，最終選擇的是元素2
- 元素2可以是子級，也可以是孫子級，只要是後代都可以
- 元素1和元素2可以是任意基礎選擇器
舉例一：
ol li a {
color: brown;
}
.nav li a {
color: cornflowerblue;
}舉例二：
<!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 a { color: red; } </style> </head> <body> <div class="nav"> <a href="#">親兒子</a> <p> <a href="#">孫子</a> </p> <a href="#">親兒子</a> </div> </body> </html>
結果：
子選擇器
只能選擇作為某元素的最近一級子元素
元素1>元素2 {樣式宣告} 表示選擇元素1裡面的所有直接後代（子元素）元素2
注意：
- 元素1和元素2中間用大於號隔開
- 元素1是父級，元素2是子級，最終選擇的是元素2
- 元素2必須是親兒子
舉例：
<!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>a { color: red; } </style> </head> <body> <div class="nav"> <a href="#">親兒子</a> <p> <a href="#">孫子</a> </p> <a href="#">親兒子</a> </div> </body> </html>
結果：
並集選擇器
可以選擇多組標籤，同時定義他們相同的樣式
元素1，元素2 {樣式宣告} 表示選擇元素1和元素2
注意：
- 元素1和元素2中間用逗號隔開，最後一個不用加逗號
- 逗號代表和的意思
- 並集選擇器常用語集體宣告
舉例：
<!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,p,ul li { color: darkorchid; } </style> </head> <body> <div>ss</div> <p>aa</p> <span>gg</span> <ul class="nav"> <li>cc</li> <li>cc</li> <li>cc</li> </ul> </body> </html>
結果
偽選擇器
給某些選擇器新增特殊效果
使用冒號: 表示 例如:hover :first-child
連結偽類選擇器
a:link 選擇所有未被訪問的連結
a:visited 選擇所有已被訪問的連結
a:hover 選擇滑鼠指標位於其上的連結
a:active 選擇活動連結（滑鼠按下未彈起的連結）
注意：
- 連結偽類選擇器的順序不能顛倒，必須按照:link\:visited\:hover\:active 即HVHA
- 給連結指定樣式要單獨指定
例子：
<!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>
/* 1. a:link 未訪問的連結，把沒有點選過的（訪問過的）連結選出來 */
a:link {
color: #333;
text-decoration: none;
}
/* 2. a:active 選擇點選過的（訪問過的）連結*/
a:visited {
color: orange;
}
/* 3. a:hover 選擇滑鼠經過的那個連結*/
a:hover {
color: skyblue;
}
/* 4. a:active 選擇的是我們滑鼠正在按下還沒有彈起滑鼠的那個連結 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小豬佩奇</a>
<a href="http://www.baidu.com">百度</a>
</body>
</html>focus偽類選擇器
獲取焦點的表單元素，一般情況<input> 類表單元素才能獲取，因此這個選擇器也主要針對表單元素來說
<!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>
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>結果：
總結
| 選擇器 | 作用 | 特徵 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 後代選擇器 | 用來選擇後代元素 | 可以使子孫後代 | 較多 | 符合是空格 .nav a |
| 子選擇器 | 選擇最近一級 | 只選親兒子 | 較少 | 符號是大於 .nav>p |
| 並集選擇器 | 選擇某些相同樣式的元素 | 可以用於集體宣告 | 較多 | 符號是逗號 .nav,.header |
| 連結偽類選擇器 | 選擇不同狀態的連結 | 跟連結相關 | 較多 | 重點記住 a{} 和a:hover 實際開發的寫法 |
| :focus選擇器 | 選擇獲得游標的表單 | 跟表單相關 | 較少 | input:focus |