1.常見選擇器
(1)id選擇器
(2)類選擇器
(3)標(biāo)簽選擇器
(4)后代選擇器
(5)群組選擇器
( 6)子代選擇器
<style>
#p1{} id選擇器
.div{} 類選擇器
img{} 標(biāo)簽選擇器
.div img{} 后代選擇器
.box1,.box2{} 群組選擇器
.div>div{} 子代選擇器
</style>
<body>
<div class="div">
<div class="box1"></div>
<div class="box2"></div>
<img src="" alt="">
<p id="p1"></p>
</div>
</body
2. 屬性選擇器
[屬性名=屬性值]可以更加精準(zhǔn)的根據(jù)屬性來選擇標(biāo)簽
[屬性名~=屬性值]選擇屬性值中含有指定單詞的標(biāo)簽
[屬性名|=屬性值]選擇屬性值中以指定值開頭的標(biāo)簽,必須是第一個字母
[屬性名^=屬性值]選擇屬性值中以指定值開頭的標(biāo)簽勉耀,帶有指定的字母就行
[屬性名*=屬性值]選擇屬性值中帶有指定值的標(biāo)簽指煎,只要包含相同的字母就行
3. 偽元素選擇器
1.+兄弟選擇器 選擇指定標(biāo)簽 其同父級 緊挨著的 下一個兄弟元素
2.:first-child 選擇每一個作為其父元素 第一個子元素 的指定標(biāo)簽
3.:first-of-type 選擇每一個父元素下面的第一個指定標(biāo)簽
4.:last-child 選擇每一個作為其父元素 最后一個子元素 的指定標(biāo)簽
5.:last-of-type 選擇每一個父元素下面的 最后一個指定標(biāo)簽
6.:not(p) 選擇每個 不是 指定標(biāo)簽 的標(biāo)簽
7.:nth-child(n) 選擇每一個父元素下面的 第n個子元素 的 目標(biāo)元素
8.:nth-of-type(n) 選擇每一個父元素下面的 第n個 目標(biāo)元素
9.:nth-last-child(n) 選擇每一個父元素下面的 倒數(shù)第n個子元素 的 目標(biāo)元素
4.偽類選擇器
1.:link 未點(diǎn)擊之前
2.:visited 點(diǎn)擊之后
3.:hover 鼠標(biāo)懸浮
4.選擇器:hover{}
當(dāng)前被選中的標(biāo)簽 在hover后 執(zhí)行什么效果
選擇器:hover 選擇器{}
第一個選擇器 選中的標(biāo)簽在hover后 讓第二個選擇器選中的標(biāo)簽 執(zhí)行什么效果
:hover 只能選中 目標(biāo)元素本身 以及其子元素 無法選中其父元素和兄弟元素
:active 正在點(diǎn)擊
四個偽類選擇器必須按照順序來定義
:hover不能設(shè)置在:link :visited之前 會被覆蓋
:active 不能設(shè)置在:hover之前
:link 和 :visited順序不強(qiáng)制要求
表單相關(guān)的偽類
1.:focus 當(dāng)表單元素 獲取焦點(diǎn)
偽元素:
1.::before 在目標(biāo)元素第一個子元素的前面 插入一個偽元素
2.::after 在目標(biāo)元素第一個子元素的后面 插入一個偽元素
3.::first-letter 給元素內(nèi)第一個文字 或者字母設(shè)置樣式
4.::selection 設(shè)置用戶選中部分的樣式