647982-818da2e694534f3b.png.jpeg

標(biāo)簽選擇器

• 什么是標(biāo)簽選擇器?
  作用: 根據(jù)指定的標(biāo)簽名稱(chēng), 在當(dāng)前界面中找到所有該名稱(chēng)的標(biāo)簽, 然后設(shè)置屬性
• 格式:

標(biāo)簽名稱(chēng){
  屬性:值;
}

• 注意點(diǎn):
  標(biāo)簽選擇器選中的是當(dāng)前界面中所有的標(biāo)簽, 而不能單獨(dú)選中某一個(gè)標(biāo)簽
  標(biāo)簽選擇器無(wú)論標(biāo)簽藏得多深都能選中

<b>id 選擇器</b>

• 什么是id選擇器?
  作用: 根據(jù)指定的id名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
• 格式:

#id名稱(chēng){
  屬性:值;
}

• 注意點(diǎn):
  1.每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做id, 也就是說(shuō)每個(gè)標(biāo)簽都可以設(shè)置id
  2.在同一個(gè)界面中id的名稱(chēng)是不可以重復(fù)的
  3.在編寫(xiě)id選擇器時(shí)一定要在id名稱(chēng)前面加上#
  4.id的名稱(chēng)是有一定的規(guī)范的
  5.id的名稱(chēng)只能由字母/數(shù)字/下劃線(a-z 0-9 _)
  6.id名稱(chēng)不能以數(shù)字開(kāi)頭
  7.id名稱(chēng)不能是HTML標(biāo)簽的名稱(chēng)()不能是a h1 img input ...)
  8.在企業(yè)開(kāi)發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會(huì)使用id ,因?yàn)樵谇岸碎_(kāi)發(fā)中id一般留給js使用的

類(lèi)選擇器

• 什么是類(lèi)選擇器?
  作用: 根據(jù)指定的類(lèi)名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
• 格式:

.類(lèi)名{
  屬性:值;
}

• 注意點(diǎn):
  每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做class, 也就是說(shuō)每個(gè)標(biāo)簽都可以設(shè)置類(lèi)名
  在同一個(gè)界面中class的名稱(chēng)是可以重復(fù)的
  在編寫(xiě)class選擇器時(shí)一定要在class名稱(chēng)前面加上點(diǎn)
  類(lèi)名的命名規(guī)范和id名稱(chēng)的命名規(guī)范一樣
  類(lèi)名就是專(zhuān)門(mén)用來(lái)給CSS設(shè)置樣式的
  在HTML中每個(gè)標(biāo)簽可以同時(shí)綁定多個(gè)類(lèi)名

格式:
<標(biāo)簽名稱(chēng) class="類(lèi)名1 類(lèi)名2 ...">
錯(cuò)誤的寫(xiě)法:
<p class="para1" class="para2">

id選擇器和類(lèi)選擇器

• id和class的區(qū)別?
  1.1
  id相當(dāng)于人的身份證不可以重復(fù)
  class相當(dāng)于人的名稱(chēng)可以重復(fù)
  1.2
  一個(gè)HTML標(biāo)簽只能綁定一個(gè)id名稱(chēng)
  一個(gè)HTML標(biāo)簽可以綁定多個(gè)class名稱(chēng)
  id選擇器和class選擇器區(qū)別?

• id選擇器是以#開(kāi)頭
  class選擇器是以.開(kāi)頭
  在企業(yè)開(kāi)發(fā)中到底用id選擇器還是用class選擇器?

注意：

id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設(shè)置樣式
在企業(yè)開(kāi)發(fā)中一個(gè)開(kāi)發(fā)人員對(duì)類(lèi)的使用可以看出這個(gè)開(kāi)發(fā)人員的技術(shù)水平
一般情況下在企業(yè)開(kāi)發(fā)中要注重冗余代碼的抽取, 可以將一些公共的代碼抽取到一個(gè)類(lèi)選擇器中, 然后讓標(biāo)簽和這個(gè)類(lèi)選擇器綁定即可

后代選擇器

• 什么是后代選擇器?

作用: 找到指定標(biāo)簽的所有特定的后代標(biāo)簽, 設(shè)置屬性

• 格式:

標(biāo)簽名稱(chēng)1 標(biāo)簽名稱(chēng)2{
  屬性:值;
}

• 先找到所有名稱(chēng)叫做"標(biāo)簽名稱(chēng)1"的標(biāo)簽, 然后再在這個(gè)標(biāo)簽下面去查找所有名稱(chēng)叫做"標(biāo)簽名稱(chēng)2"的標(biāo)簽, 然后在設(shè)置屬性

• 注意點(diǎn):
  后代選擇器必須用空格隔開(kāi)
  后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標(biāo)簽中的都是后代
  后代選擇器不僅僅可以使用標(biāo)簽名稱(chēng), 還可以使用其它選擇器
  后代選擇器可以通過(guò)空格一直延續(xù)下去

子元素選擇器

• 什么是子元素選擇器?

作用: 找到指定標(biāo)簽中所有特定的直接子元素, 然后設(shè)置屬性

• 格式:

標(biāo)簽名稱(chēng)1>標(biāo)簽名稱(chēng)2{
  屬性:值;
}

• 先找到所有名稱(chēng)叫做"標(biāo)簽名稱(chēng)1"的標(biāo)簽, 然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱(chēng)叫做"標(biāo)簽名稱(chēng)2"的元素
• 注意點(diǎn):
  子元素選擇器只會(huì)查找兒子, 不會(huì)查找其他被嵌套的標(biāo)簽
  子元素選擇器之間需要用>符號(hào)連接, 并且不能有空格
  子元素選擇器不僅僅可以使用標(biāo)簽名稱(chēng), 還可以使用其它選擇器
  子元素選擇器可以通過(guò)>符號(hào)一直延續(xù)下去

后代選擇器和子元素選擇器

• 后代選擇器和子元素選擇器之間的區(qū)別?
  1.1
  后代選擇器使用空格作為連接符號(hào)
  子元素選擇器使用>作為連接符號(hào)
  1.2
  后代選擇器會(huì)選中指定標(biāo)簽中, 所有的特定后代標(biāo)簽, 也就是會(huì)選中兒子/孫子..., 只要是被放到指定標(biāo)簽中的特定標(biāo)簽都會(huì)被選中
  子元素選擇器只會(huì)選中指定標(biāo)簽中, 所有的特定的直接標(biāo)簽, 也就是只會(huì)選中特定的兒子標(biāo)簽

• 后代選擇器和子元素選擇器之間的共同點(diǎn)
  2.1
  后代選擇器和子元素選擇器都可以使用標(biāo)簽名稱(chēng)/id名稱(chēng)/class名稱(chēng)來(lái)作為選擇器
  2.2
  后代選擇器和子元素選擇器都可以通過(guò)各自的連接符號(hào)一直延續(xù)下去
  選擇器1>選擇器2>選擇器3>選擇器4{}

• 在企業(yè)開(kāi)發(fā)中如何選擇
  如果想選中指定標(biāo)簽中的所有特定的標(biāo)簽, 那么就使用后代選擇器
  如果只想選中指定標(biāo)簽中的所有特定兒子標(biāo)簽, 那么就使用子元素選擇器

交集選擇器

• 什么是交集選擇器?
  作用: 給所有選擇器選中的標(biāo)簽中, 相交的那部分標(biāo)簽設(shè)置屬性
• 格式:

選擇器1選擇器2{
  屬性: 值;
}

• 注意點(diǎn):
  選擇器和選擇器之間沒(méi)有任何的連接符號(hào)
  選擇器可以使用標(biāo)簽名稱(chēng)/id名稱(chēng)/class名稱(chēng)
  交集選擇器僅僅作為了解, 企業(yè)開(kāi)發(fā)中用的并不多

并集選擇器

• 什么是并集選擇器?
  作用: 給所有選擇器選中的標(biāo)簽設(shè)置屬性
• 格式:

選擇器1,選擇器2{
  屬性:值;
}

• 注意點(diǎn):
  并集選擇器必須使用,來(lái)連接
  選擇器可以使用標(biāo)簽名稱(chēng)/id名稱(chēng)/class名稱(chēng)
  兄弟選擇器

相鄰兄弟選擇器

什么是相鄰兄弟選擇器 CSS2
作用: 給指定標(biāo)簽后面緊跟的那個(gè)標(biāo)簽設(shè)置屬性

• 格式:

選擇器1+選擇器2{
  屬性:值;
}

• 注意點(diǎn):
  相鄰兄弟選擇器必須通過(guò)+連接
  相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽, 不能選中被隔開(kāi)的標(biāo)簽
  通用兄弟

• 什么是通用兄弟選擇器 CSS3
  作用: 給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性

• 格式:

選擇器1~選擇器2{
  屬性:值;
}

• 注意點(diǎn):
  通用兄弟選擇器必須用~連接
  通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽, 無(wú)論有沒(méi)有被隔開(kāi)都可以選中

序選擇器

序選擇器是CSS3中新增的選擇器最具代表性的就是序選擇器
什么是序選擇器?
作用: 選中指定的任意標(biāo)簽然后設(shè)置屬性

• 1.同級(jí)別的第幾個(gè)

:first-child 選中同級(jí)別中的第一個(gè)標(biāo)簽
:last-child 選中同級(jí)別中的最后一個(gè)標(biāo)簽
:nth-child(n) 選中同級(jí)別中的第n個(gè)標(biāo)簽
:nth-last-child(n) 選中同級(jí)別中的倒數(shù)第n個(gè)標(biāo)簽
:only-child 選中父元素中唯一的標(biāo)簽
注意點(diǎn): 不區(qū)分類(lèi)型

• 2.同級(jí)同類(lèi)型的第幾個(gè)

:first-of-type 選中同級(jí)別中同類(lèi)型的第一個(gè)標(biāo)簽
:last-of-type 選中同級(jí)別中同類(lèi)型的最后一個(gè)標(biāo)簽
:nth-of-type(n) 選中同級(jí)別中同類(lèi)型的第n個(gè)標(biāo)簽
:nth-last-of-type(n) 選中同級(jí)別中同類(lèi)型的倒數(shù)第n個(gè)標(biāo)簽
:only-of-type 選中父元素中唯一類(lèi)型的某個(gè)標(biāo)簽

• 3.其它用法

:nth-child(odd) 選中同級(jí)別中的所有奇數(shù)
:nth-child(even) 選中同級(jí)別中的所有偶數(shù)
:nth-child(xn+y)
x和y是用戶(hù)自定義的, 而n是一個(gè)計(jì)數(shù)器, 從0開(kāi)始遞增

:nth-of-type(odd) 選中同級(jí)別中同類(lèi)型的所有奇數(shù)

:nth-of-type(even) 選中同級(jí)別中同類(lèi)型的所有偶數(shù)
:nth-of-type(xn+y)
x和y是用戶(hù)自定義的, 而n是一個(gè)計(jì)數(shù)器, 從0開(kāi)始遞增

屬性選擇器

• 什么是屬性選擇器?
  作用: 根據(jù)指定的屬性名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性-

• 格式:
  [attribute]

• 作用:根據(jù)指定的屬性名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
  [attribute=value]

• 作用: 找到有指定屬性, 并且屬性的取值等于value的標(biāo)簽, 然后設(shè)置屬性

• 最常見(jiàn)的應(yīng)用場(chǎng)景, 就是用于區(qū)分input屬性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

• 屬性的取值是以什么開(kāi)頭的
  [attribute|=value] CSS2
  [attribute^=value] CSS3

• 兩者之間的區(qū)別:

CSS2中的只能找到value開(kāi)頭,并且value是被-和其它內(nèi)容隔開(kāi)的
CSS3中的只要是以value開(kāi)頭的都可以找到, 無(wú)論有沒(méi)有被-隔開(kāi)
屬性的取值是以什么結(jié)尾的

[attribute$=value] CSS3
屬性的取值是否包含某個(gè)特定的值得

[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區(qū)別:
CSS2中的只能找到獨(dú)立的單詞, 也就是包含value,并且value是被空格隔開(kāi)的
CSS3中的只要包含value就可以找到, 無(wú)論有沒(méi)有被隔開(kāi)
通配符選擇器

• 什么是通配符選擇器?

作用: 給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性
格式:

*{
  屬性:值;
}

• 注意點(diǎn):
  由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性, 所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽, 如果當(dāng)前界面上的標(biāo)簽比較多, 那么性能就會(huì)比較差, 所以在企業(yè)開(kāi)發(fā)中一般不會(huì)使用通配符選擇器