現賽季等級經驗翻倍，《糖豆人：終極淘汰賽》第二賽季將於 10 月 8 日正式上線
阿新 • • 發佈：2020-10-06
一 基本選擇器
1 ID選擇器
#1.作用：
根據指定的ID名稱，在當前介面中找到對應的唯一一個的標籤，然後設定屬性。
#2.格式
id名稱{
屬性:值；
}
#3.注意
(1)在企業開發中如果僅僅只是為了設定樣式，通常不會使用id，在前端開發中id通常是留給js使用的
(2)每個標籤都可以設定唯一一個id，id就相當於人/標籤的身份證，因此在同一介面內id絕不能重複
(3)引用id一定要加#
(4)id的命名只能有字元、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p,a,img等
示範
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <style> #p1 { color: red; } #p2 { color: green; } #p3 { color: aqua; } </style> </head> <body> <p id="p1">段落1</p> <p id="p2">段落2</p> <p id="p3">段落3</p> </body> </html>
2 類選擇器
#1.作用:根據指定的類的名稱，在當前介面中找到對應的標籤，然後設定屬性
#2.格式:
.類名稱{
屬性:值;
}
#3.注意
(1)類名就是專門來給某個特點的標籤設定樣式的
(2)每個標籤都可以設定一個或多個class(空格分隔),class就相當於人/標籤的名稱，因此同一介面內class可以重複
(3)引用class一定要加點.
(4)類名的命名規則與id的命名規則相同
示範
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>id選擇器</title> <style> .p1 { color: red; } .p2 { color: green; } .p3 { color: aqua; } </style> </head> <body> <p class="p1">段落1</p> <p class="p2">段落2</p> <p class="p3">段落3</p> <p class="p1">段落4</p> 可以重複 </body> </html>
3 標籤選擇器
#1.作用:根據指定的標籤名稱，在當前介面中找到所有該名稱的標籤，然後設定屬性
#2.格式:
標籤名稱{
屬性:值;
}
#3.注意點:
(1)只要是HTML的標籤都能當做標籤選擇器
(2)標籤選擇器選中的是當前介面的所有標籤，而不能單獨選中某一標籤
(3)標籤選擇器，無論巢狀多少層都能選中
示範
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤選擇器</title> <style type="text/css"> p { color: red; } </style> </head> <body> <ul> <p>軟中華硬玉溪</p> <li> <ul> <p>頭髮越短越牛逼</p> </ul> </li> </ul> </body> </html>
4 萬用字元選擇器
#1.作用:選擇所有標籤
#2.格式:
*{
屬性:值;
}
#3、注意點：
在企業開發中一般不會使用萬用字元選擇器
理由是：
由於萬用字元選擇器是設定介面上所有的標籤的屬性，
所以在設定之前會遍歷所有的標籤
如果當前介面上的標籤比較多，那麼效能就會比較差
示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>萬用字元選擇器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<h1>你好呀</h1>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
</body>
</html>
二 組合選擇器
1 後代選擇器
#1.作用:找到指定標籤的所有後代(兒子、孫子、重孫子、、、、)標籤，設定屬性
#2.格式:
標籤1 xxx{
屬性:值;
}
#3.注意
(1)後代選擇器必須用空格隔開
(2)後代不僅僅是兒子，也包括孫子、重孫子
(3)後代選擇器不僅僅可以使用標籤名稱，還可以使用其他選擇器比如id和class
(4)後代選擇器可以通過空格一直延續下去
示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style>
div p {
color: red;
}
p {
color: aqua;
}
#id1 p{
color: green;
}
<!--都是指定標籤後者會將前者覆蓋-->
</style>
</head>
<body>
<p>我是body下的段落</p>
<div id="id1" class="part1">
<p>我是div下的段落</p>
<ul>
<p>我是div下ul下的段落</p>
</ul>
</div>
</body>
</html>
2 子元素選擇器
#1.作用:找到指定標籤的所有特點的直接子元素，然後設定屬性
#2.格式:
標籤名1>標籤名2 {
屬性：值;
}
先找到名稱叫做"標籤名稱1"的標籤，然後在這個標籤中查詢所有直接子元素名稱叫做"標籤名稱2"的元素
#3.注意:
(1)子元素選擇器之間需要用>符號連結，並且不能有空格
比如div>p會找div標籤的所有後代標籤，標籤名為">p"
(2)子元素選擇器只會查詢兒子，不會查詢其他巢狀的標籤
(3)子元素選擇器不僅可以用標籤名稱，還可以使用其他選擇器，比如id或class
(4)子元素選擇器可以通過>符號一直延續下去
示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素選擇器</title>
<style type="text/css">
body>p {
color: green;
}
div>p {
color: red;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<p>我是body下的段落2</p>
<div id="id1" class="part1">
<p>我是div下的段落</p>
<ul>
<p>我是div下ul下的段落</p>
</ul>
</div>
</body>
</html>
後代選擇器與子元素選擇器差別:
後代選擇器可以通過空格無限向下尋找所有對應的標籤無論中間有多少其他標籤的阻隔，
元素選擇器向下尋找所有的對應標籤遇到其他標籤便會被阻隔。
3 毗鄰選擇器，CSS2退出(相鄰兄弟選擇器)
#1.作用:選定緊跟其後的那個標籤
#2.格式
選擇器+選擇器2 {
屬性:值;
}
#3.注意
1.毗鄰選擇器必須通過+連結
2.毗鄰選擇器只能選中緊跟其後的那個標籤，不能選中被隔開的標籤
4 弟弟選擇器，CSS3推出(通用兄弟選擇器)
#1.作用:給指定選擇器後面的所有選擇器中的所有標籤設定屬性
#2.格式:
選擇器1~選擇器2{
屬性:值;
}
#3.注意
(1)通用兄弟選擇器必須用~來連結
(2)通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的所有標籤
無論有沒有被隔開，都可以被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟選擇器</title>
<style type="text/css">
h1+p {
color: red;
}
h1~p{
color: green;
}
</style>
</head>
<body>
<h1 >我是標題1</h1>
<a href="">有了這個標籤，p就不再是緊跟h1標籤了,但通用兄弟選擇器仍然能選中</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是標題2</h1>
<p>我是段落</p>
</body>
</html>
三 交集選擇器與並集選擇器
1.交集選擇器(不常用)
#1、作用：給所有選擇器選中的標籤中，相交的那部分標籤設定屬性
#2、格式：
選擇器1選擇器2 {
屬性：值;
}
#3、注意：
1、選擇器與選擇器之間沒有任何連結符號
2、選擇器可以使用標籤名稱、id、class
3、交集選擇器在企業開發中並不多見，瞭解即可
因為：p.part1 完全可以用.part1取代
2.並集選擇器
#1.作用:給所有滿足條件的標籤設定屬性
#2.格式:
選擇器1,選擇器2 {
屬性:值;
}
#3.注意:
(1)選擇器與選擇器之間必須用逗號來連結
(2)選擇器可以使用標籤名稱、id、class
示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>並集選擇器</title>
<style type="text/css">
.part1,a,#p1{
color: red;
}
</style>
</head>
<body>
<h1>標題</h1>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<a href="#">我是我</a>
<p>我是段落</p>
</body>
</html>
四 序列選擇器
#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，過去的選擇器中要選中某個必須加id或class，學習了這9個後，不用加id或class，想選中同級別的第幾個就選第幾個
#2、格式
#2.1 同級別
:first-child p:first-child 同級別的第一個
:last-child p:last-child 同級別的最後一個
:nth-child(n) 同級別的第n個
:nth-last-child(n) 同級別的倒數第n個
#2.2 同級別同類型
:first-of-type 同級別同類型的第一個
:last-of-type 同級別同類型的最後一個
:nth-of-type(n) 同級別同類型的第n個
:nth-last-of-type(n) 同級別同類型的倒數第n個
#2.3 其他
:only-of-type 同類型的唯一一個
:only-child 同級別的唯一一個
同級別
#1、同級別的第一個
#1.1 示範一
p:first-child {
color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標籤(body級別，div級別)
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
</body>
這樣的話body的第一個p和div中的第一個p都變成紅色，
#1.2 示範二
p:first-child {
color: red;
}
代表：同級別的第一個，並且第一個要求是一個p標籤
<h1>w我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
這樣的話只有div中的第一個p變紅，因為在有在div內同一級別的第一個才是p
注意點：
:fist-child就是第一個孩子，不區分型別
#2、同級別的最後一個
p:last-child {
color: red;
}
代表：同級別的最後一個，並且最後一個要求是一個p標籤
與first-child同理
#3、同級別的第n個
p:nth-child(3) {
color: red;
}
代表：同級別的第3個，並且第3個要求是一個p標籤
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落2”變紅
#4、同級別的倒數第n個
p:nth-last-child(3) {
color: red;
}
代表：同級別的倒數第3個，並且第3個要求是一個p標籤
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
這樣的話只有“我是段落6.1”和“我是段落5”被選中
同級別同類型
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
#1、同級別同類型的第一個(沒有被要求同級別的第一個必須是同類型)
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被選中
#2、同級別同類型的最後一個
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被選中
#3、同級別同類型的第n個
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被選中
#4、同級別同類型的倒數第n個
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被選中
示例:同級同類型
其他型別
#1、同類型的唯一一個
p:only-of-type {
color: red;
}
<h1>我是標題</h1>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是標題</h1>
</div>
<p>我是段落7</p>
“我是段落7“被選中
#2、同級別的唯一一個
p:only-child {
color: red;
}
<h1>我是標題</h1>
<div>
<p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被選中
示例：其他
五 屬性選擇器
#1、作用：根據指定的屬性名稱找到對應的標籤，然後設定屬性
該選擇器，最常用於input標籤
#2、格式與具體用法：
[屬性名]
其他選擇器[屬性名]
[屬性名=值]
[屬性名^=值]
[屬性名$=值]
[屬性名*=值]
例1：找到所有包含id屬性的標籤
[id]
例2：找到所有包含id屬性的p標籤
p[id]
例3：找到所有class屬性值為part1的p標籤
p[class="part1"]
例4：找到所有href屬性值以https開頭的a標籤
a[href^="https"]
例5：找到所有src屬性值以png結果的img標籤
img[src$="png"]
例6：找到所有class屬性值中包含part2的標籤
[class*="part"]
六 偽類選擇器
#1、作用：常用的幾種偽類選擇器。
#1.1 沒有訪問的超連結a標籤樣式：
a:link {
color: blue;
}
#1.2 訪問過的超連結a標籤樣式：
a:visited {
color: gray;
}
#1.3 滑鼠懸浮在元素上應用樣式：
a:hover {
background-color: #eee;
}
#1.4 滑鼠點選瞬間的樣式：
a:active {
color: green;
}
#1.5 input輸入框獲取焦點時樣式：
input:focus {
outline: none;
background-color: #eee;
}
#2 注意：
1 a標籤的偽類選擇器可以單獨出現，也可以一起出現
2 a標籤的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
link，visited，hover，active
3 hover是所有其他標籤都可以使用的
4 focus只給input標籤使用
七 CSS的三大特性
1. 繼承性
#1.定義:給某一個元素設定一些屬性，該元素的後代也可以使用，這個我們稱之為繼承性
#2.注意:
(1)只有以color、font-、text-、line-開頭的屬性才可以繼承
(2)a標籤的文字顏色和下劃線是不能繼承別人的
(3)h標籤的文字大小是不能繼承別人的，會變大，但是會在原來自提大小的基礎上變大
#3.應用場景
通常基於繼承性統一設定網頁的文字顏色、字型、文字大小等樣式
2.層疊性
#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即如果有多個選擇器選中了同一個標籤那麼會有覆蓋效果
#2、注意：
1、層疊性只有在多個選擇器選中了同一個標籤，然後設定了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以檢視到，一些屬性被劃掉了
3.優先順序
#1、定義：當多個選擇器選中同一個標籤，並且給同一個標籤設定相同的屬性時，如何層疊就由優先順序來確定
#2、優先順序
整體優先順序從高到底：行內樣式>嵌入樣式>外部樣式
行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先順序
(1)大前提：直接選中 > 間接選中(即繼承而來的)
(2)如果都是間接選中，那麼誰離目標標籤比較近，就選誰的
(3)如果都是直接選中，並且都是同類型的選擇器，那麼就是誰寫的在後面就選誰
(4)如果都是直接選中，並且是不同型別的選擇器，那麼就會按照選擇器的優先順序來層疊
id > 類 > 標籤 > 萬用字元(也算直接選中) > 繼承 > 瀏覽器預設（即沒有設定任何屬性）