CSS選擇器篇

2021-10-07 09:26:03 字數 2759 閱讀 4122

要想將css樣式應用於特定的html元素,首先需要找到該目標元素。在css中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)

標籤選擇器是指用html標籤名作為選擇器,按標籤名分類,為頁面中某一類標籤指定統一的css樣式。其基本語法格式如下:

/*標籤選擇器 可以把某一類標籤全部選擇出來 div span */

標籤名

注:標籤選擇器最大的優點是能快速為頁面中同型別的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。

類選擇器使用.(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:

/*標籤呼叫的時候用 class=「類名」 即可*/

.類名

注:類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。 可以選擇乙個或者多個標籤

小技巧:

長名稱或片語可以使用-來為選擇器命名,不建議使用_下劃線來命名css選擇器

w3c標準規定,在同乙個頁面內,不允許有相同名字的id物件出現,但是允許相同名字的class

類選擇器(class)好比人的名字, 是可以多次重複使用的

id選擇器好比人的身份證號碼, 全中國是唯一的, 不得重複。 只能使用一次。

#id

萬用字元選擇器*號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:

*

復合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。

6.1 交集選擇器

交集選擇器由兩個選擇器構成,其中第乙個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格。

7.2 並集選擇器

並集選擇器(css選擇器分組)是各個選擇器通過逗號連線而成的,任何形式的選擇器(包括標籤選擇器、class類選擇器id選擇器等),都可以作為並集選擇器的一部分。

div,p

7.3 後代選擇器

後代選擇器又稱為包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。當標籤發生巢狀時,內層標籤就成為外層標籤的後代。

ul li

注:子孫後代都可以這麼選擇。 或者說,它能選擇任何包含在內 的標籤

7.4 子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟乙個 > 進行連線,注意,符號左右兩側各保留乙個空格

ul>li

7.5 緊鄰兄弟選擇器

若想選擇同乙個父元素中,相鄰的同級別的元素,我們可以使用緊鄰同胞選擇器

h1+p

// 選中緊鄰自己的兄弟p元素

7.6 兄弟選擇器

後續同胞選擇器使用 ~ 表示,選擇乙個元素後面同屬乙個父元素的另乙個元素

h1~p

// 選中兄弟元素中所有為p的元素

偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果, 比如可以選擇第1個第n個元素

8.1 鏈結偽類選擇器

偽類選擇器

描述:link

未訪問的鏈結

:visited

已訪問的鏈結

:hover

滑鼠移動到鏈結上

:active

選定的鏈結

注意:寫的時候,他們的順序盡量不要顛倒 按照 lvha 的順序

div:link

#id:hover

div:active

通常用來生成並選中某個元素內部的第乙個子元素最後乙個子元素,此元素沒有名字,為匿名元素

before生成並選中第乙個子元素,格式:

span::before

after生成並選中最後乙個子元素,格式:

span::after

CSS選擇器篇(所有選擇器 )

class 類選擇器 classname 選擇類名為classname的元素 css classname html id id選擇器 idname 選擇id名為idname的元素 idname 選擇所有 萬用字元 element 元素選擇器 div 選擇所有的div元素 p element,elem...

CSS3 選擇器篇

如同人類的的進化一樣,css3是css2的進化版本,在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷 css當js用 js當後台語言用 瀏覽器支援程度差,需要新增私有字首 移動端 a webkit 谷歌 google b moz 火狐 firef...

css3選擇器篇

標籤選擇器 陳業貴陳業貴 陳業貴陳業貴 核心 給html標籤設定相應的css屬性。精確的 id選擇器 identity1 1111 identity2 1111 identity3 1111 identity4 1111 核心 唯一 同一頁面內 標籤命名規則 4.1id的名稱只能由字母 數字 下劃線...