寫給正在學習選擇器的小伙伴們！
不懂的可以加我聯系方式，一起討論！
QQ：951434130
序選擇器很重要，學習時記得不懂的查MDN，或者W3C官方文檔，因為序選擇器有些我的理解也不是很對
標簽選擇器
- 注意點：
- 根據指定標簽名稱，在當界面中找到指定標簽的所以標簽，然后設置屬性
- 無論標簽藏得多深都能找到選中
- 不能單獨選中某個標簽，如果使用標簽選擇器，那樣同名標簽都會被設值，例如p標簽，當使用標簽選擇器時，當前頁面所有p標簽都會被設值
<style>
p{
color: green;
}
</style>
id選擇器
- id選擇器是根據指定的id名稱找到對應的標簽, 然后設置屬性
- 在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id，為什么？因為在前端開發中id是留給js使用的
<style>
#id1{
color: green;
}
</style>
注意點：
- 每個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設置id
- 在同一個界面中id的名稱是不可以重復的
- 在編寫id選擇器時一定要在id名稱前面加上#
- id的名稱是有一定的規范的
- 1 id的名稱只能由字母/數字/下劃線a-z 0-9 _
- 2 id名稱不能以數字開頭
- 3 id名稱不能是HTML標簽的名稱不能是a h1 img input ...
- 在企業開發中一般情況下如果僅僅是為了設置樣式, 我們不會使用id ,因為在前端開發中id是留給js使用的
以上這段注意點是來自我老師 李南江的解答！
類選擇器
- 選擇指定設置過后的類名，找到對應的標簽，然后設置屬性
<style>
.header{
color: green;
}
</style>
注意點：
1.每個HTML標簽都有一個屬性叫做class, 也就是說每個標簽都可以設置類名
2.在同一個界面中class的名稱是可以重復的
3.在編寫class選擇器時一定要在class名稱前面加上.
4.類名的命名規范和id名稱的命名規范一樣
5.類名就是專門用來給CSS設置樣式的
6.在HTML中每個標簽可以同時綁定多個類名
格式:<標簽名稱 class="類名1 類名2 ...">
錯誤寫法：<p class="para1" class="para2">
以上這段注意點是來自我老師 李南江的解答！
交集選擇器
交集選擇題的注意點？
1 .選擇器和選擇器之間沒有任何的連接符號
2 .選擇器可以使用標簽名稱/id名稱/class名稱
3 .交集選擇器僅僅作為了解, 企業開發中用的并不多
4 .交集選擇器是給所有選擇器選中的標簽中, 相交的那部分標簽設置屬性
- 格式：
<style>
.para1#identity{
color: blue;
}
</style>
并集選擇器
什么是并集選擇器?
1 .給所有選擇器選中的標簽設置屬性
2 .并集選擇器必須使用,來連接
3 .選擇器可以使用標簽名稱/id名稱/class名稱
- 格式：
<style>
.ht,.para{
color: red;
}
</style>
兄弟選擇器
相鄰兄弟選擇器 CSS2
1 .給指定選擇器后面緊跟的那個選擇器選中的標簽設置屬性
2 .相鄰兄弟選擇器必須通過+連接
3 .相鄰兄弟選擇器只能選中緊跟其后的那個標簽, 不能選中被隔開的標簽
- 格式：
<style>
h1+p{
color: red;
}
</style>
通用兄弟選擇器 CSS3
給指定選擇器標簽后面的所有選擇器標簽選中設置屬性
1 .通用兄弟選擇器必須用~連接
2 .通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
- 格式：
<style>
h1~p{
color: red;
}
</style>
序選擇器
:first-child
- 選中同級別中的第一個標簽
- 例如div下面的四個p標簽，但是只選擇同級別的第一P標簽設置屬性，其余三個沒有任何變化，就算是div外層還是有兩個p標簽，那樣也是只有外層第一個p標簽和div里的第一個p標簽會被設置屬性，變化
- 注意點：如果同級別的第一個p標簽前面有其他標簽，那樣那個p標簽就沒有作用了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序選擇器</title>
<style>
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<p>我是段落2</p>
<p>我是段落4</p>
<p>我是段落5</p>
</div>
</body>
</html>
-
效果如下
效果圖
:last-child
- 選中同級別中的最后一個標簽
- 顧名思義與上一段話一樣，就是選中同級別中最后一個標簽才會有效果，例如一下代碼，第一級別是p和div，第一級別的同級別最后一個標簽不是p標簽，所以他沒有生效，會往二級標簽里繼續查找，div里的二級同級別標簽，最后一個剛好是p標簽所以他生效了，相反，如果第一級別同級別最后一個是標簽是p而不是div時，他就會在第一級別時生效了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序選擇器</title>
<style>
p:last-child{
color: red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<p>我是段落4</p>
</div>
</body>
</html>
-
效果如下
效果圖
效果圖
:nth-child(n)
- 選中同級別中的第n個標簽
- :nth-child(n)里的n是自己輸入的幾位數，如果html頁面里有五個p標簽，那樣你輸入3:nth-child(3)他就會給正序第三個p設置屬性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序選擇器</title>
<style>
p:nth-child(3){
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
效果圖
:nth-last-child(n)
- 選中同級別中的倒數第n個標簽
- nth-last-child(n)里的n是自己輸入的幾位數，如果html頁面里有五個p標簽，那樣你輸入3:nth-child(3)他就會給倒序第三個p設置屬性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序選擇器</title>
<style>
p:nth-last-child(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
效果圖
:only-child
- 選中父元素中唯一的標簽
- 很好理解，選中整個頁面里唯一一個元素，當一級層次有兩個標簽時，那樣它不符合條件，所以他會轉向二級，選中div里的唯一一個p，所以他div外層的p沒生效就是這樣子
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-child{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<div>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果圖
:first-of-type
- 選中同級別中同類型的第一個標簽
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
image
效果圖
:last-of-type
- 選中同級別中同類型的最后一個標簽
- 和:first-of-type類似，不過他選中的是同級別中的最后一個標簽
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:last-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果圖
:nth-of-type(n)
- 選中同級別中同類型的第n個標簽
- :nth-of-type(3)如果n里寫3，那樣就會選中同級別正序的第三個標簽
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-of-type(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果圖
:nth-last-of-type(n)
- 選中同級別中同類型的倒數第n個標簽
- :nth-last-of-type(n)如果n里寫3，那樣就會選中同級別倒序的第三個標簽
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-last-of-type(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果圖
:only-of-type
- 選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素(這段話是來自w3c的描述:only-of-type選擇器的)
- 個人理解:only-of-type，是選中父元素中的唯一一個子元素，多了不會生效，如果我們在div里的p下面再添加一個p，這時添加的p不會生效，并且導致div里的第一個p元素也會失去效果，代碼實踐最實在，看圖
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
在div里添加多了個p的效果圖
:nth-child(xn+y)
- x和y是用戶自定義的, 而n是一個計數器, 從0開始遞增
- :nth-child(2n+0)，x填2時，他會從0開始，會在第二個p時開始生效，遞增，每次兩個，一直到結束，看代碼、這里的理解看個人，我的可能是錯的，如果有錯請在評論區告知我，謝謝
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(2n+0){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>
-
效果如下
nth-child(2n+0)
:nth-child(even)
- 選中同級別中的所有偶數
- :nth-child(even)的效果圖和上面nth-child(2n+0）一樣，我就不重新截圖了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(even){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>
-
效果如下
image
:nth-child(odd)
- 選中同級別中的所有奇數
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(odd){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
<p>我是項目</p>
</body>
</html>
-
效果如下
image
屬性選擇器
[attribute]
- 根據指定的屬性名稱找到對應的標簽, 然后設置屬性
- 把指定屬性填入p[這]，例如id的話，他就會把設有id的標簽給設置效果,當然你也可以填寫class
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[id]{
color: red;
}
</style>
</head>
<body>
<p id="id1">我是段落</p>
<p id="id2">我是段落</p>
<p>我是段落</p>
<p id="id3">我是段落</p>
<p>我是段落</p>
<p id="id4">我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
image
[attribute=value]
- 找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設置屬性
- [attribute=value]最常見的應用場景, 就是用于區分input屬性
- input[type=password]找到指定的input的type屬性，再找到指定的type屬性的取值password，然后設置屬性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=password]{
border:2px solid;
border-radius:25px;
}
</style>
</head>
<body>
<input type="password">
</body>
</html>
-
效果如下
image
屬性的取值是以什么開頭的
[attribute|=value] CSS2
- CSS2中的只能找到value開頭,并且value是被-和其它內容隔開
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt|=abc]{
color: red;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
</body>
</html>
-
效果如下
image
[attribute^=value] CSS3
- CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt^=abc]{
color: red;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
屬性的取值是以什么結尾的
[attribute$=value] CSS3
- CSS3中的只要是以value結尾的都可以找到, 無論有沒有被-隔開
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt$=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
屬性的取值是否包含某個特定的值得
[attribute~=value] CSS2
- CSS2中的只能找到獨立的單詞, 也就是包含value,并且value是被空格隔開的
- 只能找到被空格隔開的
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt~=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
[attribute*=value] CSS3
- CSS3中的只要包含value就可以找到
- 不區分空格橫杠連接
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt*=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
通配符選擇器
- 給當前界面上所有的標簽設置屬性
- 注意點：由于通配符選擇器是設置界面上所有的標簽的屬性, 所以在設置之前會遍歷所有的標簽, 如果當前界面上的標簽比較多, 那么性能就會比較差, 所以在企業開發中一般不會使用通配符選擇器
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: deeppink;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
image
