寫給正在學習選擇器的小伙伴們蒿囤!
不懂的可以加我聯(lián)系方式客们,一起討論!
QQ:951434130
序選擇器很重要材诽,學習時記得不懂的查MDN底挫,或者W3C官方文檔,因為序選擇器有些我的理解也不是很對
標簽選擇器
- 注意點:
- 根據(jù)指定標簽名稱脸侥,在當界面中找到指定標簽的所以標簽建邓,然后設(shè)置屬性
- 無論標簽藏得多深都能找到選中
- 不能單獨選中某個標簽,如果使用標簽選擇器睁枕,那樣同名標簽都會被設(shè)值涝缝,例如p標簽,當使用標簽選擇器時譬重,當前頁面所有p標簽都會被設(shè)值
<style>
p{
color: green;
}
</style>
id選擇器
- id選擇器是根據(jù)指定的id名稱找到對應的標簽, 然后設(shè)置屬性
- 在企業(yè)開發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會使用id拒逮,為什么?因為在前端開發(fā)中id是留給js使用的
<style>
#id1{
color: green;
}
</style>
注意點:
- 每個HTML標簽都有一個屬性叫做id, 也就是說每個標簽都可以設(shè)置id
- 在同一個界面中id的名稱是不可以重復的
- 在編寫id選擇器時一定要在id名稱前面加上#
- id的名稱是有一定的規(guī)范的
- 1 id的名稱只能由字母/數(shù)字/下劃線a-z 0-9 _
- 2 id名稱不能以數(shù)字開頭
- 3 id名稱不能是HTML標簽的名稱不能是a h1 img input ...
- 在企業(yè)開發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會使用id ,因為在前端開發(fā)中id是留給js使用的
以上這段注意點是來自我老師 李南江的解答臀规!
類選擇器
- 選擇指定設(shè)置過后的類名滩援,找到對應的標簽,然后設(shè)置屬性
<style>
.header{
color: green;
}
</style>
注意點:
1.每個HTML標簽都有一個屬性叫做class, 也就是說每個標簽都可以設(shè)置類名
2.在同一個界面中class的名稱是可以重復的
3.在編寫class選擇器時一定要在class名稱前面加上.
4.類名的命名規(guī)范和id名稱的命名規(guī)范一樣
5.類名就是專門用來給CSS設(shè)置樣式的
6.在HTML中每個標簽可以同時綁定多個類名
格式:<標簽名稱 class="類名1 類名2 ...">
錯誤寫法:<p class="para1" class="para2">
以上這段注意點是來自我老師 李南江的解答塔嬉!
交集選擇器
交集選擇題的注意點玩徊?
1 .選擇器和選擇器之間沒有任何的連接符號
2 .選擇器可以使用標簽名稱/id名稱/class名稱
3 .交集選擇器僅僅作為了解, 企業(yè)開發(fā)中用的并不多
4 .交集選擇器是給所有選擇器選中的標簽中, 相交的那部分標簽設(shè)置屬性
- 格式:
<style>
.para1#identity{
color: blue;
}
</style>
并集選擇器
什么是并集選擇器?
1 .給所有選擇器選中的標簽設(shè)置屬性
2 .并集選擇器必須使用,來連接
3 .選擇器可以使用標簽名稱/id名稱/class名稱
- 格式:
<style>
.ht,.para{
color: red;
}
</style>
兄弟選擇器
相鄰兄弟選擇器 CSS2
1 .給指定選擇器后面緊跟的那個選擇器選中的標簽設(shè)置屬性
2 .相鄰兄弟選擇器必須通過+連接
3 .相鄰兄弟選擇器只能選中緊跟其后的那個標簽, 不能選中被隔開的標簽
- 格式:
<style>
h1+p{
color: red;
}
</style>
通用兄弟選擇器 CSS3
給指定選擇器標簽后面的所有選擇器標簽選中設(shè)置屬性
1 .通用兄弟選擇器必須用~連接
2 .通用兄弟選擇器選中的是指定選擇器后面某個選擇器選中的所有標簽, 無論有沒有被隔開都可以選中
- 格式:
<style>
h1~p{
color: red;
}
</style>
序選擇器
:first-child
- 選中同級別中的第一個標簽
- 例如div下面的四個p標簽,但是只選擇同級別的第一P標簽設(shè)置屬性谨究,其余三個沒有任何變化恩袱,就算是div外層還是有兩個p標簽,那樣也是只有外層第一個p標簽和div里的第一個p標簽會被設(shè)置屬性胶哲,變化
- 注意點:如果同級別的第一個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標簽,所以他沒有生效,會往二級標簽里繼續(xù)查找漾橙,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是自己輸入的幾位數(shù)蚣录,如果html頁面里有五個p標簽搓扯,那樣你輸入3:nth-child(3)他就會給正序第三個p設(shè)置屬性
- 格式:
<!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)
- 選中同級別中的倒數(shù)第n個標簽
- nth-last-child(n)里的n是自己輸入的幾位數(shù),如果html頁面里有五個p標簽包归,那樣你輸入3:nth-child(3)他就會給倒序第三個p設(shè)置屬性
- 格式:
<!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
- 選中父元素中唯一的標簽
- 很好理解,選中整個頁面里唯一一個元素铅歼,當一級層次有兩個標簽時公壤,那樣它不符合條件,所以他會轉(zhuǎn)向二級椎椰,選中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>
-
效果如下
: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)
- 選中同級別中同類型的倒數(shù)第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>
-
效果如下
:nth-child(xn+y)
- x和y是用戶自定義的, 而n是一個計數(shù)器, 從0開始遞增
- :nth-child(2n+0)稽坤,x填2時丈甸,他會從0開始,會在第二個p時開始生效尿褪,遞增睦擂,每次兩個,一直到結(jié)束杖玲,看代碼顿仇、這里的理解看個人,我的可能是錯的摆马,如果有錯請在評論區(qū)告知我夺欲,謝謝
- 格式:
<!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(even)
- 選中同級別中的所有偶數(shù)
- :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>
-
效果如下
:nth-child(odd)
- 選中同級別中的所有奇數(shù)
- 格式:
<!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>
-
效果如下
屬性選擇器
[attribute]
- 根據(jù)指定的屬性名稱找到對應的標簽, 然后設(shè)置屬性
- 把指定屬性填入p[這]今膊,例如id的話些阅,他就會把設(shè)有id的標簽給設(shè)置效果,當然你也可以填寫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>
-
效果如下
[attribute=value]
- 找到有指定屬性, 并且屬性的取值等于value的標簽, 然后設(shè)置屬性
- [attribute=value]最常見的應用場景, 就是用于區(qū)分input屬性
- input[type=password]找到指定的input的type屬性,再找到指定的type屬性的取值password斑唬,然后設(shè)置屬性
- 格式:
<!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>
-
效果如下
屬性的取值是以什么開頭的
[attribute|=value] CSS2
- CSS2中的只能找到value開頭,并且value是被-和其它內(nèi)容隔開
- 格式:
<!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>
-
效果如下
[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>
-
效果如下
屬性的取值是以什么結(jié)尾的
[attribute$=value] CSS3
- CSS3中的只要是以value結(jié)尾的都可以找到, 無論有沒有被-隔開
- 格式:
<!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>
-
效果如下
屬性的取值是否包含某個特定的值得
[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>
-
效果如下
[attribute*=value] CSS3
- CSS3中的只要包含value就可以找到
- 不區(qū)分空格橫杠連接
- 格式:
<!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>
-
效果如下
通配符選擇器
- 給當前界面上所有的標簽設(shè)置屬性
- 注意點:由于通配符選擇器是設(shè)置界面上所有的標簽的屬性, 所以在設(shè)置之前會遍歷所有的標簽, 如果當前界面上的標簽比較多, 那么性能就會比較差, 所以在企業(yè)開發(fā)中一般不會使用通配符選擇器
- 格式:
<!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>
-
效果如下