通配符選擇器
通配選擇器的作用就是對(duì)頁(yè)面上所有的元素都生效，
頁(yè)面上的所有標(biāo)簽都會(huì)展示出通配符選擇器設(shè)定的樣式。
這樣的弊端就是影響網(wǎng)頁(yè)渲染的時(shí)間。所以不推薦直接使用通配符選擇器
取代寫法就是 把需要統(tǒng)一設(shè)置的元素放在一起，通過(guò) [分組選擇器]
一次性設(shè)置。
對(duì)于初學(xué)者，不用過(guò)于在于網(wǎng)頁(yè)打開速度以及性能問(wèn)題，對(duì)于什么時(shí)候使用
通配符選擇器呢？在你需要的時(shí)候直接用就可以。其實(shí)也就下面這段代碼。
如：code1
通配符的另一個(gè)用法就是給某個(gè)元素的后代設(shè)置相同的樣式。如：code3
結(jié)合類選擇器使用。
code1
{
margin: 0;
padding: 0;
}
-------------------
分組選擇器(并集選擇器)
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
/*code2*/
margin:0;
padding:0;
}
--------------------
標(biāo)簽選擇器
h1{
color: blue;
}
p{
font-family: 微軟雅黑;
color: cadetblue;
}
--------------------
類選擇器: 最常用的選擇器
類選擇器的單獨(dú)使用
.desc{
border: dashed;
}
類選擇器和其他形式組合使用
.desc p{
color: deeppink;
font-size: 20px;
}
.desc *{
/*code3*/
color: deeppink;
}
--------------------
ID選擇器
需要注意的是，注意大小寫.
不能使用詞列表，參考區(qū)別2，錯(cuò)誤代碼如下：
#title name{
font-size: 30px;
}
可以和其他選擇器結(jié)合使用
#title{
font-size: 30px;
}
#title .name{
color: #000;
}
--------------------
后代選擇器（包含選擇器）
.desc p{
color: deeppink;
font-size: 20px;
}
.descendant em{
font-weight: bold;
}
--------------------
子元素選擇器
.child > p > em{
font-size: 30px;
}
--------------------
相鄰選擇器
可以結(jié)合其他選擇器使用
需要注意的是：使用相鄰選擇器，必須是有共同的父元素
.Adjacent h5 + p {
margin-top:50px;
}
兄弟選擇器
.Adjacent h5 ~ p{
font-size: 30px;
}
--------------------
屬性選擇器
頁(yè)面上所有的超鏈接標(biāo)簽顏色都會(huì)變成紅，也可以和其他選擇器組合使用
根據(jù)一個(gè)屬性去選擇
.testA a[href] {
color:red;
}
a[href] {
color:red;
}
根據(jù)多個(gè)屬性去選擇
同樣也可以和其他選擇器組合使用
a[href][title] {
font-size: 25px;
}
根據(jù)具體的屬性值去選擇，案例如上
a[href=’#’][title=’test’] {color: deeppink;}
屬性與屬性值必須匹配
a[class=’aaa bbb’]{
color: chartreuse;
}
根據(jù)部分屬性值選擇,即只要該屬性中存在指定值得元素都會(huì)被選擇到
如果忽略了波浪號(hào)，則說(shuō)明需要完成完全值匹配
p[class~=’important’]{
color: red;
}
子串匹配屬性選擇器 : 分三種
選擇的屬性中，屬性值以指定的屬性值開頭
a[href ^= ’http://www.apple’]{
color: deeppink;
}
選擇的屬性中，屬性值以指定的屬性值結(jié)尾
a[href $= ’microsoft.com’]{
color: cadetblue;
}
選擇的屬性中，屬性值存在指定的屬性值
a[href*=’www.w3school.com’]{
color: red;
}
特定屬性選擇類型
屬性選擇器最常見的用途還是匹配語(yǔ)言值
p[lang|=’en’]{
color: red;
}
--------------------
偽類
偽類名對(duì)大小寫不敏感;
:active 需要放在 :hover 后邊才會(huì)生效;
:hover 需要放在 :link :visited 后邊才會(huì)生效;
另外偽類也可以和其他選擇器結(jié)合使用
a:link {color: #FF0000} 未訪問(wèn)的鏈接
a:visited {color: #00FF00} 已訪問(wèn)的鏈接
a:hover {color: #FF00FF} 鼠標(biāo)移動(dòng)到鏈接上
a:active {color: #0000FF} 選定的鏈接
:first-child 偽類來(lái)選擇元素的第一個(gè)子元素
.wl p:first-child{
color: red;
} 容易被誤解！讀法：選用.wl這個(gè)類的元素下邊第一個(gè)p標(biāo)簽，并不是p標(biāo)簽內(nèi)的第一個(gè)元素，與下邊樣式對(duì)比
.wl p i:first-child{
font-size: 30px;
} 讀法：.wl 類下所有p標(biāo)簽中的第一個(gè) i 標(biāo)簽
.wl p:first-child i{
color: #FF00FF;
} 讀法：.wl 下邊的第一個(gè) p 標(biāo)簽中所有 i 標(biāo)簽
.wl li:first-child{
font-family: monospace;
}
--------------------
偽元素 注：也可以和其他選擇器結(jié)合使用
:first-line 偽元素:用于向文本的首行設(shè)置特殊樣式
:first-line 只能用于塊級(jí)元素,看頁(yè)面樣式
注：以下屬性可以用于偽元素:first-line中
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
.wl p:first-line {
color:#ff0000;
font-variant:small-caps;
}
:first-letter: 處理首字母
:first-letter 只能用于塊級(jí)元素,看頁(yè)面樣式
注：以下屬性可以用于偽元素:first-letter中
font
color
background
margin
padding
border
text-decoration
vertical-align (僅當(dāng) float 為 none 時(shí))
text-transform
line-height
float
clear
.wl p:first-letter{
color: chocolate;
}
以上兩個(gè)就構(gòu)成了多重偽元素
:before 偽元素 :可以在元素的內(nèi)容前面插入新內(nèi)容
.wl p:before{
content: url("");
}
.wl p:after{
content: url("");
}
********
關(guān)于選擇的優(yōu)先級(jí)的問(wèn)題
id選擇器優(yōu)先級(jí) > 類選擇器優(yōu)先級(jí) > 標(biāo)簽選擇器優(yōu)先級(jí)
【 微信掃一掃 】
