碼迷,mamicode.com
首頁 > Web開發 > 詳細

css3選擇器

時間:2018-10-12 19:31:15      閱讀:1643      評論:0      收藏:0      [點我收藏+]

標簽:情況   ado   star   原則   意義   sha   偽元素   extern   關鍵字   

 
 
 
 

一,CSS3 選擇器分類

技術分享圖片

二,選擇器語法

极速时时彩走势图1,基本選擇器語法

選擇器 類型 功能描述
*  通配選擇器  選擇文檔中所以HTML元素
E  元素選擇器 選擇指定類型的HTML元素
#id  ID選擇器 選擇指定ID屬性值為“id”的任意類型元素
.class  類選擇器 選擇指定class屬性值為“class”的任意類型的任意多個元素
selector1,selectorN  群組選擇器 將每一個選擇器匹配的元素集合并

 

极速时时彩走势图2,層次選擇器語法

選擇器 類型 功能描述
E  F 后代選擇器(包含選擇器) 選擇匹配的F元素,且匹配的F元素被包含在匹配的E元素內
E>F 子選擇器 選擇匹配的F元素,且匹配的F元素所匹配的E元素的子元素
E+F 相鄰兄弟選擇器 選擇匹配的F元素,且匹配的F元素緊位于匹配的E元素的后面
E~F 通用選擇器 選擇匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

 

极速时时彩走势图3,動態偽類選擇器語法

選擇器 類型 功能描述
E:link 鏈接偽類選擇器   選擇匹配的E元素,而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上
E:visited   鏈接偽類選擇器 選擇匹配的E元素,而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上
E:active 用戶行為選擇器 選擇匹配的E元素,且匹配元素被激活。常用于鏈接描點和按鈕上
E:hover 用戶行為選擇器 選擇匹配的E元素,且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover
E:focus 用戶行為選擇器 選擇匹配的E元素,而且匹配元素獲取焦點

 

4,目標偽類選擇器

選擇器 功能描述
E:target 選擇匹配E的所有元素,且匹配元素被相關URL指向

 

5,UI元素狀態偽類選擇器語法

選擇器 類型 功能描述
E:checked 選中狀態偽類選擇器 匹配選中的復選按鈕或者單選按鈕表單元素
E:enabled 啟用狀態偽類選擇器 匹配所有啟用的表單元素
E:disabled 不可用狀態偽類選擇器 匹配所有禁用的表單元素

极速时时彩走势图 6,結構偽類選擇器使用語法

選擇器 功能描述
E:fisrt-child 作為父元素的第一個子元素的元素E。與E:nth-child(1)等同
E:last-child 作為父元素的最后一個子元素的元素E。與E:nth-last-child(1)等同
E:root 選擇匹配元素E所在文檔的根元素。在HTML文檔中,根元素始終是html,此時該選擇器與html類型選擇器匹配的內容相同
E F:nth-child(n) 選擇父元素E的第n個子元素F。其中n可以是整數(1,2,3)、關鍵字(even,odd)、可以是公式(2n+1),而且n值起始值為1,而不是0.
E F:nth-last-child(n) 選擇父元素E的倒數第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反,但使用方法都是一樣的,其中:nth-last-child(1)始終匹配最后一個元素,與last-child等同
E:nth-of-type(n) 選擇父元素內具有指定類型的第n個E元素
E:nth-last-of-type(n) 選擇父元素內具有指定類型的倒數第n個E元素
E:first-of-type 選擇父元素內具有指定類型的第一個E元素,與E:nth-of-type(1)等同
E:last-of-tye 選擇父元素內具有指定類型的最后一個E元素,與E:nth-last-of-type(1)等同
E:only-child 選擇父元素只包含一個子元素,且該子元素匹配E元素
E:only-of-type 選擇父元素只包含一個同類型子元素,且該子元素匹配E元素
E:empty 選擇沒有子元素的元素,而且該元素也不包含任何文本節點

极速时时彩走势图注:(1),“ul>li:nth-child(3)”表達的并不是一定選擇列表ul元素中的第3個子元素li,僅有列表ul中第3個li元素前不存在其他的元素,命題才有意義,否則不會改變列表第3個li元素的樣式。

极速时时彩走势图(2),:nth-child(n)  中參數只能是n,不可以用其他字母代替。

(3),:nth-child(odd) 選擇的是奇數項,而使用:nth-last-child(odd) 選擇的卻是偶數項

极速时时彩走势图7,否定偽類選擇器

選擇器 功能描述
E:not(F) 匹配所有除元素F外的E元素

8,屬性選擇器語法

選擇器功能描述
用于選取帶有指定屬性的元素。
用于選取帶有指定屬性和值的元素。
用于選取屬性值中包含指定詞匯的元素。
用于選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。
匹配屬性值以指定值開頭的每個元素。
匹配屬性值以指定值結尾的每個元素。

匹配屬性值中包含指定值的每個元素。


 

CSS 選擇符:

1)      id選擇器(# myid)

2)      類選擇器(.myclassname)

极速时时彩走势图3)      標簽選擇器(div, h1, p)

极速时时彩走势图4)      相鄰選擇器(h1 + p)

极速时时彩走势图5)      子選擇器(ul > li)

6)      后代選擇器(li a)

极速时时彩走势图7)      通配符選擇器( * )

极速时时彩走势图8)      屬性選擇器(a[rel = "external"])

9)      偽類選擇器(a: hover, li:nth-child)

可繼承的樣式:

1)      font-size

2)      font-family

3)      color

4)      text-indent

不可繼承的樣式:

极速时时彩走势图1)      border

2)      padding

3)      margin

极速时时彩走势图4)      width

极速时时彩走势图5)      height

優先級算法:

1)      優先級就近原則,同權重情況下樣式定義最近者為準;

2)      載入樣式以最后載入的定位為準;

3)      3.!important >  id > class > tag  

4)      important 比 內聯優先級高,但內聯比 id 要高

CSS3新增偽類舉例:

极速时时彩走势图1)      p:first-of-type  選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。

2)      p:last-of-type   選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。

3)      p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。

极速时时彩走势图4)      p:only-child     選擇屬于其父元素的唯一子元素的每個 <p> 元素。

5)      p:nth-child(2)  選擇屬于其父元素的第二個子元素的每個 <p> 元素。

极速时时彩走势图6)      :enabled :disabled 控制表單控件的禁用狀態。

7)      :checked         單選框或復選框被選中。

CSS3有哪些新特性?

1)    CSS3實現圓角(border-radius),陰影(box-shadow),

极速时时彩走势图2)    對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)

3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4)    增加了更多的CSS選擇器  多背景 rgba 

极速时时彩走势图5)    在CSS3中唯一引入的偽元素是 ::selection.

6)    媒體查詢,多欄布局

7)    border-image

css3選擇器

標簽:情況   ado   star   原則   意義   sha   偽元素   extern   關鍵字   

原文地址:https://www.cnblogs.com/mengshi-web/p/9780103.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
           
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!