css3選擇器如下：
壹、通配符選擇器（*）
通配符選擇器是用來選擇所有元素，，也可以選擇某個元素下的所有元素。
二、元素選擇器（E）
元素選擇器，是css選擇器中最常見而且最基本的選擇器。
三、類選擇器（.className）
類選擇器是以壹獨立於文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名
四、id選擇器（#ID）
ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加註ID名稱，這樣在樣式選擇器中才能找到相對應的元素，不同的是ID選擇器是壹個頁面中唯壹的值，我們在類使用時是在相對應的類名前加上壹個“.”號（.className）而id選擇器是在名稱前使用＂#＂如（#id）,
五、後代選擇器（EF）
後代選擇器也被稱作包含選擇器，所起作用就是可以選擇某元素的後代元素，比如說：E?
F，前面E為祖先元素，F為後代元素，所表達的意思就是選擇了E元素的所有後代F元素，請註意他們之間需要壹個空格隔開。
六、子元素選擇器（Egt;F）
子元素選擇器只能選擇某元素的子元素，其中E為父元素，而F為子元素，其中Egt;F所表示的是選擇了E元素下的所有子元素F。這和後代選擇器（E?
F）不壹樣，在後代選擇器中F是E的後代元素，而子元素選擇器Egt;F，其中F僅僅是E的子元素而以。
七、相鄰兄弟元素選擇器（E+F）
相鄰兄弟選擇器可以選擇緊接在另壹元素後的元素，而且他們具有壹個相同的父元素，換句話說，EF兩元素具有壹個相同的父元素，而且F元素在E元素後面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇F元素。
##CSS選擇器##CSS選擇器
#標簽選擇器
#id選擇器
#類選擇器
#後代選擇器
#子元素選擇器
#交集選擇器
#並集選擇器
#兄弟選擇器(相鄰兄弟選擇器/通用兄弟選擇器)
#序選擇器(CSS3中最具代表性)
#屬性選擇器
#通配符選擇器
#偽元素選擇器
標簽選擇器
1.什麽是標簽選擇器?
作用:根據指定的標簽名稱,在當前界面中找到所有該名稱的標簽,然後設置屬性
2.格式:
標簽名稱{
屬性:值;
}
註意點:
1.標簽選擇器選中的是當前界面中所有的標簽,而不能單獨選中某壹個標簽
2.標簽選擇器無論藏得多深都能被選中
3.只要是HTML中的標簽就可以作為標簽選擇器
id選擇器
1.什麽是id選擇器?
作用:根據指定的id名稱找到對應的標簽,然後設置屬性
格式:
#id名稱{
屬性:值;
}
註意點:
1.每個HTML標簽都有壹個屬性叫做id,也就是說每個標簽都可以設置id
2.在同壹個界面的id名稱是不可以重復的
3.在編寫id選擇器時壹定要在id名稱前面加上#
4
id的名稱是有壹定的規範的
4.1.if的名稱只能由字母/數字/下劃線組成
4.2.id名稱不能以數字開頭
4.3id名稱不能是HTML標簽的名稱
4.4在企業開發中壹般情況下如果僅僅是為了設置樣式,我們不會使用id,因為前端開發中是留給js使用的
類選擇器
什麽是類選擇器?
作用:根據指定的類名稱找到對應的標簽,然後設置屬性
格式:
.類名稱{
屬性:值;
}
註意點:
1.每個HTML標簽都有壹個屬性叫做class,也就是說每個標簽都可以設置class
2.在同壹個界面的class名稱是可以重復的
3.在編寫class選擇器時壹定要在class名稱前面加上.
4.類名的命名規範和id名稱的命名規範壹樣
5.類名解釋專門用來給某個特定的標簽設置樣式的
6.在HTML中每個標簽可以同時綁定多個類名
格式:
標簽名稱class=“類名1類名2類名3”
錯誤寫法
id和class的區別?
1.1
id相當於人的身份證不可以重復
class相當於人的名稱可以重復
1.2
壹個HTML標簽只能綁定壹個id名稱
壹個HTML表圈可以綁定多個class名稱
2.id選擇器是以#開頭
class選擇器以.開頭
3.在企業開發中到底使用id選擇器還是用class選擇器
id選擇器壹般是給js用的,除非特殊情況,否則不要用id去設置樣式
4.在企業開發中壹個開發人員對類的使用可以看出這個開發人員的技術水平
後代選擇器
什麽是後代選擇器?
-作用:找到指定標簽的所有特定的後代標簽,設置屬性
-格式:
標簽名稱1標簽名稱2{
屬性:值;
}
先找到名稱叫做標簽名稱1的標簽,然後再在這個標簽下面去查找所有名稱叫做標簽名稱2的標簽,然後再設置屬性
-註意點:
1.後代選擇器必須用空格隔開
2.後代不僅僅是兒子,也包括孫子/重孫子.只要最終是放到指定標簽中的都是後代
3.後代選擇器不僅僅可以使用標簽名稱還可以使用其他選擇器
子元素選擇器
什麽是子元素選擇器?
-作用:找到所有標簽中特定的直接子元素,然後設置屬性
-格式:
標簽名稱1標簽名稱2{
屬性:值;
}
先找到名稱叫做”標簽名稱1”的標簽,然後再這個標簽中找到所有的直接子元素名稱叫做”標簽名稱2”的元素
-註意點:
1.子元素選擇器只會查找兒子,不會查找其他被嵌套的標簽
2.子元素選擇器,之間需要用連接,而且不能有空格
3.子元素選擇器不僅僅可以使用標簽名稱還可以用其他選擇器
4.子元素選擇器可以通過符號壹直延續下去
1.後代選擇器和子元素選擇器之間的區別?
1.1
後代選擇器使用空格作為連接符號
子元素選擇器使用作為連接符號
1.2
後代選擇器會選中指定標簽中,所有的特定後代標簽
子元素選擇器只會選中指定標簽中,所有的特定直接標簽
2.後代選擇器和子元素選擇器之間的***同點
2.1
後代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器
2.2
後代選擇器和子元素選擇器都可以通過各自的連接符號壹直延續下去
3.在企業開發中如何選擇
交集選擇器
什麽是交集選擇器?
-作用:給所有選擇器選中的標簽中,相交的那部分標簽設置屬性
-格式:
選擇器1選擇器2{
屬性:值;
}
-註意點:
1.選擇器1和選擇器2之間沒有任何的連接符號
2.選擇器可以使用標簽的名稱/id名稱/class名稱
3.交集選擇器僅僅作為了解,企業開發中用的並不多
並集選擇器
什麽是並集選擇器?
-作用:給所有選擇器選中的標簽設置屬性
格式:
選擇器1,選擇器2{
屬性:值;
}
註意點:
1.並集選擇器必須使用,來連接
2.2.選擇器可以使用標簽的名稱/id名稱/class名稱
兄弟選擇器
1.相鄰兄弟選擇器CSS2
-作用:給指定選擇器後面[緊跟]的那個選擇器選中的標簽設置屬性
格式:
選擇器1+選擇器2{
屬性:值;
}
註意點:
1.相鄰兄弟選擇器必須通過+連接
2.相鄰兄弟選擇器只能選中緊跟其後面的那個標簽,不能選中被隔開的標簽
2.通用兄弟選擇器CSS3
-作用:給指定的選擇器後面的所有選擇器選中的所有標簽都設置屬性
-格式:
選擇器1~選擇器2{
屬性:值;
}
-註意點:
1.通用兄弟選擇器必須用~連接
2.通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的標簽後面的所有標簽
序選擇器(CSS3中新增的選擇器中最具代表性)
1.同級別的第幾個
:first-child選中同級別中的第壹個標簽
:last-child選中同級別中的最後壹個標簽
:nth-child(n)選中同級別中的第n個標簽
:nth-last-child(n)選中同級別中的倒數第n個標簽
:only-child選中父元素中唯壹的子元素
:nth-child(odd)奇數選中同級別中的所有奇數個標簽
:nth-child(even)偶數選中同級別中的所有偶數個標簽
:nth-child(xn+y)選中同級別中的所有的用戶自定義的(xn+y)個標簽
x和y是用戶自定義的,而n是壹個計數器,從0開始遞增有多少個標簽n就遞增多少次
註意點:不區分類型
2.同類型的第幾個
:first-of-type選中同級別中同類型的第壹個標簽
:last-of-type選中同級別中同類型的最後壹個
:nth-of-type(n)選中同級別中同類型的第n個標簽
:nth-last-of-type(n)選中同級別中同類型的倒數第n個標簽
:only-of-type選中父元素中唯壹類型的某個標簽
屬性選擇器
什麽是屬性選擇器?
作用:根據指定的屬性名稱找到對應標簽,然後設置屬性
格式:
[attribute]
作用:根據指定的屬性名稱找到對應的標簽,然後設置屬性
[attribute=value]
作用:找到有指定屬性,並且屬性的取值等於value的標簽,然後設置屬性
最常見的應用場景,就是用於區分input屬性
1.屬性的取值是以什麽開頭的
[attribute|=value]CSS2
[attribute^=value]CSS3
兩者之間的區別:
CSS2中的只能找到value開頭並以-和其他內容隔開的標簽,而CSS3可以找到以value開頭的所有標簽
2.屬性的取值是以什麽結尾的
[attribute$=value]?CSS3
3.屬性的取值是否包含某個特定的值的
[attribute~=value]CSS2
[attribute*=value]CSS3
兩者之間的區別:
CSS2中的只能找到獨立的單詞,也就是說value用空格和其他內容隔開的標簽,而CSS3可以找到包含value的所有標簽
通配符選擇器
什麽是通配符選擇器?
-作用:給當前界面上所有的標簽設置屬性
-格式:
*{
屬性:值;
}
-註意點:
由於通配符是設置界面上所有的標簽的屬性,所以在設置前會遍歷所有的標簽,如果當前界面上的標簽比較多,那麽性能會比較差,所以企業開發中壹般不會使用通配符選擇器
1.什麽是偽元素選擇器?
偽元素選擇器作用就是給指定標簽的內容前面添加壹個子元素或者給指定標簽的內容後面添加壹個子元素
格式:
給指定標簽的內容前面添加壹個子元素
標簽名稱::before{
屬性名稱:值;
}
給指定標簽的內容後面添加壹個子元素
標簽名稱::before{
屬性名稱:值;
}
css選擇器最常用的類型css常用的四種選擇器類型有：
標簽選擇器：針對壹類標簽
ID選擇器：針對某壹個特定的標簽使用
類選擇器：針對妳想要的所有標簽使用
後代選擇器：用空格隔開
1、標簽選擇器：選擇器的名字代表html頁面上的標簽
標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經常描述“***性”，無法描述某壹個元素的“個性”。
舉例：
styletype="text/css"
p{
font-size:14px;
}
/style
body
pcss/p
/body
再比如說，想讓“學完了安卓，繼續學前端喲”這句話中的“前端”兩個變為紅色字體，那麽可以用span標簽把“前端”這兩個字圍起來，然後給span標簽加壹個標簽選擇器。
代碼如下：
!DOCTYPEhtml
html
head
metacharset="UTF-8"
titleDocument/title
styletype="text/css"
span{
color:red;
}
/style
/head
body
p學完了安卓，繼續學span前端/span喲/p
/body
/html
總結需要註意的是：
（1）所有的標簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。
（2）無論這個標簽藏的多深，壹定能夠被選擇上。
（3）選擇的所有，而不是壹個。
2、ID選擇器：規定用#來定義（名字自定義）
針對某壹個特定的標簽來使用，只能使用壹次。css中的ID選擇器以”#”來定義。
舉例：
head
titleDocument/title
styletype="text/css"
#mytitle
{
border:3pxdashedgreen;
}
/style
/head
然後在別處使用id來引用它：
body
h2id="mytitle"妳好/h2
/body
id選擇器的選擇符是“#”。
任何的HTML標簽都可以有id屬性。表示這個標簽的名字。這個標簽的名字，可以任取，但是：
（1）只能有字母、數字、下劃線。
（2）必須以字母開頭。
（3）不能和標簽同名。比如id不能叫做body、img、a。
（4）大小寫嚴格區分，也就是說aa,和AA是兩個不同的ID
另外，特別強調的是：HTML頁面，不能出現相同的id，哪怕他們不是壹個類型。比如頁面上有壹個id為pp的p，壹個id為pp的div，是非法的！
壹個標簽可以被多個css選擇器選擇：
比如，可以同時讓標簽選擇器和id選擇器作用於同壹個標簽。（用到了層疊）如下：
請點擊輸入圖片描述
然後通過網頁的審查元素看壹下效果：
請點擊輸入圖片描述
現在，假設選擇器沖突了，比如id選擇器說這個文字是紅色的，標簽選擇器說這個文字是綠色的。那麽聽誰的？
實際上，css有著非常嚴格的計算公式，能夠處理沖突.
壹個標簽可以被多個css選擇器選擇，***同作用，這就是“層疊式”的第壹層含義
3、類選擇器：規定用圓點.來定義
類選擇器.?針對想要的所有標簽使用。優點：靈活。
css中用.來表示類。舉例如下：
styletype="text/css"
.oneclass/*定義類選擇器*/{
width:800px;
}
/style
/head
然後在別處使用class來引用它：
body
h2class="oneclass"妳好/h2
/body
和id非常相似，任何的標簽都可以攜帶id屬性和class屬性。但是id屬性只能被某壹特定標簽引用壹次
class屬性的特點：
特性1：類選擇器可以被多種標簽使用。
特性2：同壹個標簽可以使用多個類選擇器。用空格隔開。舉例如下
h3class="classone?classtwo"我是壹個h3啊/h3
而不能寫成：
h3class="teshu"class="zhongyao"我是壹個h3啊/h3
類選擇器使用的舉例：
類選擇器的使用，能夠決定壹個人的css水平。
應該註意：
（1）不要去試圖用壹個類名，把某個標簽的所有樣式寫完。這個標簽要多攜帶幾個類，***同完成這個標簽的樣式。
（2）每壹個類要盡可能小，有“公***”的概念，能夠讓更多的標簽使用。
如：
styletype="text/css"
.lv{
color:green;
}
.da{
font-size:30px;
}
.underline{
text-decoration:underline;
}
/style
然後讓每個標簽去選取自己想要用的類選擇器：
pclass="lvda"段落1/p
pclass="lvxian"段落2/p
pclass="daxian"段落3/p
問題：到底用id還是用class？
答案：盡可能的用class，除非極特殊的情況可以用id。
原因：id是js用的。也就是說，js要通過id屬性得到標簽，所以css層面盡量不用id，要不然js就很別扭。另壹層面，會認為壹個有id的元素，有動態效果。
舉例如下：
請點擊輸入圖片描述
上圖所示，css和js都在用同壹個id，會出現不好溝通的情況。
記住這句話：類上樣式，id上行為。意思是說，class屬性交給css使用，id屬性交給js使用。
上面這三種選擇器的區別：
標簽選擇器針對的是頁面上的壹類標簽。
ID選擇器是只針對特定的標簽(壹個)，ID是此標簽在此頁面上的唯壹標識。
類選擇器可以被多種標簽使用。
4、後代選擇器:定義的時候用空格隔開
對於EF這種格式，表示所有屬於E元素後代的F元素，有這個樣式。空格就表示後代。
後代選擇器，就是壹種平衡：***性、特性的平衡。當要把某壹個部分的所有的什麽，進行樣式改變，就要想到後代選擇器。
後代選擇器，描述的是祖先結構。
看定義可能有點難理解，我們來看例子吧。
舉例1：
styletype="text/css"
.div1p{
color:red;
}
/style
空格就表示後代。.div1p表示.div1的後代所有的p。
這裏強調壹下：這兩個標簽不壹定是連續緊挨著的，只要保持壹個後代的關聯即可。也就是說，選擇的是後代，不壹定是兒子。
舉例：
styletype="text/css"
h3bi{
color:red;
}
/style
上方代碼的意思是說：定義了h3標簽中的b標簽中的i標簽的樣式。
同理：h3和b和i標簽不壹定是連續緊挨著的，只要保持壹個後代的關聯即可。
效果：
請點擊輸入圖片描述
或者還有下面這種寫法：
請點擊輸入圖片描述
上面的這種寫法，h3標簽和i標簽並不是緊挨著的，但他們保持著壹種後代關系。
還有下面這種寫法：（含類選擇器、id選擇器都是可以的）
請點擊輸入圖片描述
在開頭說了：後代選擇器，描述的是壹種祖先結構。舉個例子來說明這句話：
!DOCTYPEhtml
html
head
metacharset="UTF-8"
titleDocument/title
styletype="text/css"
divdivp{
color:red;
}
.div2{...}
.div3{...}
.div4{...}
/style
/head
body
div
div
div
div
p我是什麽顏色？/p
/div
/div
/div
/div
/body
/html
上面css中的divdivp，也能使文字的顏色變紅。通過瀏覽器的審查元素，我們可以看到p元素的祖先列表：
請點擊輸入圖片描述
2),常用的CSS選擇器有哪些?標簽選擇器：通過標簽名稱來選取元素，例如"p"表示所有段落。
類選擇器：通過類名來選取元素，使用"."符號來定義，例如".my-class"表示所有具有"my-class"類名的元素。
ID選擇器：通過元素的ID名稱來選取元素，