CSS常用選擇器

2021-08-04 05:57:43 字數 1580 閱讀 4856

class 選擇器

/*選擇並設定 class="intro" 的元素的樣式*/

.intro

id選擇器
/*為 id="firstname" 的元素設定樣式*/

#firstname

標籤選擇器
/*選擇並設定所有 元素的樣式*/

p

並集選擇器:使用」,」(逗號)連線兩個選擇器
/*選擇並設定所有 樣式和所有 元素的樣式*/

h1,p

後代選擇器:使用」 「(空格)連線
/*選擇並設定位於 元素內部的每個 元素的樣式*/

divp

子代選擇器:使用」>」連線
type="text/css">

/*選取父元素是 元素的每個元素,結果是只有第一行元素內文字變紅*/

div>strong

style>

this isverystrong>

verystrong> important.

this is reallyverystrong>

em> important.

div>

相鄰選擇器:使用」+」連線
/*選擇 元素之後緊跟的每個 元素,並設定其背景色*/

div+p

萬用字元選擇器:」*」
/*選擇頁面內所有元素,並設定內外邊距為0*/

*

:hover 選擇器
/*當滑鼠懸停在之上時,設定背景顏色為黃色*/

a:hover

:nth-child() 選擇器

/*使第偶數個變成紅色*/

li:nth-child(2n)

style>

--------------------------------------

黑色li>

紅色li>

黑色li>

紅色li>

黑色li>

紅色li>

ul>

/*規定屬於其父元素的第二個子元素的每個 p 的背景色*/

p:nth-child(2)

style>

head>

這是標題h1>

第乙個段落。(紅色)p>

第二個段落。p>

第三個段落。p>

第四個段落。p>

body>

html>

:first-child 選擇器和 :last-child 選擇器
/*選擇屬於其父元素的首個子元素的每個 元素,並為其設定樣式,相當於:nth-child(1)*/

p:first-child

/*指定屬於其父元素的最後乙個子元素的 p 元素的背景色,相當於::nth-last-child(1)*/

p:last-child

CSS 常用選擇器

選擇器是指通過一定的語法規則選取到對應的html標記,然後給這個對應的html標記設定樣式 1.標籤選擇器 寫法 標籤名 標籤選擇器影響範圍大,一般用來做一些通用設定,或用在層級選擇器中。舉例 div 這是第乙個div 這是第二個div 2.類選擇器 寫法 類名 通過類名來選擇元素,乙個類可應用於多...

css常用選擇器

css 層疊樣式表 作用 美化html 行內式 css選擇器 外鏈式為單獨書寫的乙個css檔案,內容類似內嵌式,但是沒有內嵌式的外部標籤 如下 標籤選擇器 p color darkseagreen font family 楷體 font weight 200 id選擇器 id color india...

css常用選擇器

選擇器 優先順序id class 標籤名 標籤選擇器 標籤名為判定條件 liclass類選擇器 class屬性作為判定條件 class之間的優先順序看定義先後 pec grey yellow id選擇器 id屬性為判定條件 只能用一次 id屬性是為了劃分頁面結構 不能重複 first 屬性選擇器 a...