要想將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的名稱只能由字母 數字 下劃線...