css基礎(五) 選擇器

2021-08-25 05:35:23 字數 1543 閱讀 1251

5.屬性選擇器

1)^表示以val開頭,att表示屬性[比如title,class之類的]

2)$表示以val結尾的

3) *表示含有val字串的

例如;a[class^="column"]

html

7.not偽類選擇器

選擇除某個元素外其餘的元素

格式:某元素節點:not([其屬性節點=「xx」])

就form而言,想給除submit以外的input元素加上紅色,css可以寫成

form (表示只能是li直接子元素不能是a孫元素)

ol a (表示可以是孫元素)

ol > li:first-child{

color: red;

11偽類選擇器--last-child

與first-child類似,不同的是 這是指元素的最後乙個子元素

12偽類選擇器--nth-child(n)

定位父元素的乙個或多個子元素,引數從1開始數

其中的n可以是

1)整數1,2,3,4

2)表示式2n+1,5-n

3)關鍵字odd,even

但是當n是乙個表示式時,從0開始計算,當表示式為0或者小於0不選擇任何乙個元素

13偽類選擇器—nth-last-child(n)

類似於上乙個nth-child(n)但是這個是從後面開始計算

14.fist-of-type選擇器

類似於first-child選擇器,不同的是指定了元素型別,定位父元素某個型別的第乙個子元素

例如:background: orange;

其中div不一定是父元素的第乙個子元素

15.last-of-type選擇器

與first-of-type相似

只是選擇父元素下的最後乙個指定元素型別的子元素

16.nth-of-type(n)選擇器

與nth-child(n)類似,只是指定了元素型別

17.nth-last-of-type(n)選擇器

類似於nth-of-type(n),只是從最後乙個元素開始數起

18.only-child選擇器

選擇父元素只有乙個子元素,而且是唯一乙個子元素

19.only-of-type選擇器

表示乙個元素有很多子元素,只有一種型別的子元素是唯一的,only-of-type可以選中這個唯一乙個型別的子元素

例如:我是乙個段落

我是乙個段落

我是乙個段落

我是乙個段落

我是乙個div元素

我是乙個段落

我是乙個div元素

background: orange;

表示

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...

CSS 基礎選擇器

css cascading style sheet,層疊式樣式表,即乙個標籤可以同時被多種選擇器選擇,標籤選擇器 id選擇器 類選擇器。這些選擇器都可以選擇上同乙個標籤,從而影響樣式。基礎選擇器 1.標籤選擇器,就是標籤的名字。追光者如果說你是遙遠的星河 耀眼得讓人想哭我是追逐著你的眼眸總在孤單時候...