CSS 常用選擇器

2021-08-07 10:49:07 字數 2015 閱讀 5422

選擇器是指通過一定的語法規則選取到對應的html標記,然後給這個對應的html標記設定樣式

1.標籤選擇器

寫法:標籤名

標籤選擇器影響範圍大,一般用來做一些通用設定,或用在層級選擇器中。

舉例:div

......

這是第乙個div

這是第二個div

2.類選擇器

寫法:類名

通過類名來選擇元素,乙個類可應用於多個元素,乙個元素上也可以使用多個類,應用靈活,可復用,是css中應用最多的一種選擇器。

舉例:.blue

.big

.box

......

....

....

3.層級選擇器(後代選擇器)

寫法:父選擇器空格子選擇器

主要應用在標籤巢狀的結構中,層級選擇器,是結合上面的兩種選擇器來寫的選擇器,它可與標籤選擇器結合使用,減少命名,同時也可以通過層級,限制樣式的作用範圍。

舉例:.con

.con span

.con .pink

.con .gold

......

....

....

.......

....

選擇器

書寫格式

標籤選擇器

標籤名p

類選擇器

.類名.title

層級選擇器

.類名.子類名

.title.subtitle

其他選擇器(了解:

通用選擇器:*

*子選擇器

相鄰元素選擇器

屬性選擇器

/*1.只要有class屬性*/

/*div[class]*/

/*2.class="12"*/

/*div[class="12abs"]*/

/*3.以class^="12",以12開頭的值*/

/*div[class^="12"]*/

/*4.以class$="12",以12結尾的值*/

/*div[class$="12"]*/

/*5.以class*="a",凡是有a的值*/

div[class*="a"]

其他選擇器1

/*1.第幾個子元素;  標籤型別和序號必須全部一致*/

/*.box div:nth-child(1)*/

/*倒著數

.box div:nth-last-child(2)*/

/*最後乙個*/

/*.box div:last-child*/

/*第乙個標籤型別和序號必須全部一致*/

.box div:first-child

其他選擇器2

e:last-of-type 最後乙個

/*子元素中  第乙個div標籤*/

.box div:nth-of-type(3)

.box div:first-of-type

.box div:last-of-type

CSS常用選擇器

class 選擇器 選擇並設定 class intro 的元素的樣式 intro id選擇器 為 id firstname 的元素設定樣式 firstname 標籤選擇器 選擇並設定所有 元素的樣式 p並集選擇器 使用 逗號 連線兩個選擇器 選擇並設定所有 樣式和所有 元素的樣式 h1,p 後代選擇...

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...