目錄

屬性選擇器

偽類選擇器

元素的偽類

---

屬性選擇器

1.[屬性名]{} 2. [屬性名=屬性值]{} 3.[屬性名^=屬性值]{} 4. [屬性名$=屬性值]{} 5.[屬性名*=屬性值]{}

1.[屬性名]{}
2. [屬性名=屬性值]{}?
3.[屬性名^=屬性值]{}?
4. [屬性名$=屬性值]{} ?
5.[屬性名*=屬性值]{}?

解釋：

1.選擇含有指定屬性的元素

2.選擇含有指定屬性以及指定屬性值的元素

3.選擇含有指定屬性以及指定屬性值結尾的元素

4.選擇含有指定屬性,只要含有某個屬性值的元素

<style>

[title]{

? ? color: red;

? }

? [title=ab]{

? ? color: green;

? }

? [title^=ab]{

? ? background-color: pink;

? }

? [title$=ab]{

? ? font-size: 30px;

? ?

? }

? [title*=c]{

? ? background-color: green;

? }

? ? </style>

body>

? ? <!-- title屬性 ?當鼠標懸浮到對應的區域后，

? ? ? 會顯示對應title屬性的屬性值 -->

? ? <h1 title="a" id="hh">滿江紅·寫懷</h1>

? ? <h3 title="ab">岳飛·宋</h3>

? ? <p>····</p>

? ? <p title="abc"></p>

? ? <p title="abab"></p>

? ? <p title="c">。</p>

? ? <p></p>

? </body>

title屬性 當鼠標懸浮到對應的區域后，會顯示對應title屬性的屬性值

偽類選擇器

:first-child 第一個子元素:last-child 最后一個子元素:nth-child(n) 選中第n個子元素n 選中所有的子元素2n/even 偶數2n+1/odd 奇數

??:first-child ? 第一個子元素
? ? ? ? :last-child ? ?最后一個子元素
? ? ? ? :nth-child(n) ?選中第n個子元素
? ? ? ? ? ? ? n ? ?選中所有的子元素
? ? ? ? ? ? ? 2n/even ? 偶數
? ? ? ? ? ? ? 2n+1/odd ?奇數

:first-of-type 第一個子元素:last-of-type 最后一個子元素:nth-of-type(n) 選中第n個子元素

:not() 否定偽類 ?將符合條件的元素去除

元素的偽類

link 表示未訪問過的a標簽的狀態 visited 表示訪問過的a標簽的狀態 hover 鼠標移入后，元素的狀態 active 鼠標點擊后，元素的狀態

?:first-of-type ? 第一個子元素
? ? ? ? :last-of-type ? ?最后一個子元素
? ? ? ? :nth-of-type(n) ? ? 選中第n個子元素

link 表示未訪問過的a標簽的狀態
visited ?表示訪問過的a標簽的狀態
hover ?鼠標移入后，元素的狀態
active ?鼠標點擊后，元素的狀態偽元素選擇器

?::first-letter ?第一個字母
? ? ? ? ? ::first-line ? ?第一行
? ? ? ? ? ::selection ? ?選中的內容
? ? ? ? ? ::before ? ? 在元素開始的位置前
? ? ? ? ? ::after ? ? ?在元素結束的位置后

• 設置鼠標懸停在元素上時的樣式
• 為已訪問和未訪問鏈接設置不同的樣式
• 設置元素獲得焦點時的樣式

總結

以上是生活随笔為你收集整理的北大青鸟培训第四天：HTML和CSS相关知识 （持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。