CSS3簡明教程之徵服CSS3選擇器
第6章 征服CSS3選擇器
屬性選擇器
在HTML中,透過各種各樣的屬性可以給元素增加很多附加的資訊。例如,透過id屬性可以將不同div元素進行區分。
在CSS2中引入了一些屬性選擇器,而CSS3在CSS2的基礎上對屬性選擇器進行了擴充套件,新增了3個屬性選擇器,使得屬性選擇器有了萬用字元的概念,這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示:
屬性選擇器 | 功能描述 |
---|---|
E[att^='val'] | 選擇匹配元素E,且E元素定義了屬性att,其屬性值以val開頭的任何字串 |
E[att$='val'] | 選擇匹配元素E,且E元素定義了屬性att,其屬性值以val結尾的任何字串 |
E[att*='val'] | 選擇匹配元素E,且E元素定義了屬性att,其屬性值的任意位置包含了val |
示例:
a[class^=icon]{ background: green; color:#fff; }a[href$=pdf]{ background: orange; color: #fff; }a[title*=more]{ background: blue; color: #fff; }
結構性偽類選擇器 root
:root
選擇器,從字面上我們就可以很清楚的理解是根選擇器,他的意思就是匹配元素E所在文件的根元素。在HTML文件中,根元素始終是
透過“:root”選擇器設定背景顏色
:root { background:orange; }
結構性偽類選擇器 not
:not
選擇器稱為否定選擇器,和jQuery
中的:not
選擇器一模一樣,可以選擇除某個元素之外的所有元素。就拿form
元素來說,比如說你想給表單中除submit
按鈕之外的input
元素新增紅色邊框
form { width: 200px; margin: 20px auto; }div { margin-bottom: 20px; }input:not([type="submit"]){ border:1px solid red; }
結構性偽類選擇器 empty
:empty
選擇器表示的就是空。用來選擇沒有任何內容的元素,這裡沒有內容指的是一點內容都沒有,哪怕是一個空格
比如說,你的文件中有三個段落p元素,你想把沒有任何內容的P元素隱藏起來。我們就可以使用:empty
選擇器來控制
p{ background: orange; min-height: 30px; }p:empty { display: none; }
結構性偽類選擇器 target
:target
選擇器稱為目標選擇器,用來匹配文件(頁面)的url的某個標誌符的目標元素
點選連結顯示隱藏的段落
html程式碼:
content for Brand
css程式碼:
.menuSection{ display: none; }:target{ /*這裡的:target就是指id="brand"的div物件*/ display:block; }
分析:
具體來說,觸發元素的URL中的標誌符通常會包含一個#號,後面帶有一個標誌符名稱,上面程式碼中是:
#brand
:target
就是用來匹配id為brand
的元素(id="brand"
的元素),上面程式碼中是那個div元素。
多個url
(多個target
)的處理:
同一個頁面上有很多的url的時候你可以取不同的名字,只要#號後對的名稱與id=""中的名稱對應就可以了
html程式碼:
content for Brandcontent for jakecontent for aron
CSS程式碼:
#brand:target { background: orange; color: #fff; }#jake:target { background: blue; color: #fff; }#aron:target { background: red; color: #fff; }
結構性偽類選擇器 first-child
:first-child
選擇器表示的是選擇父元素的第一個子元素的元素E
示例演示:
透過:first-child
選擇器定位列表中的第一個列表項,並將序列號顏色變為紅色。
html程式碼:
CSS程式碼:
ol > li{ font-size:20px; font-weight: bold; margin-bottom: 10px; }ol a { font-size: 16px; font-weight: normal; }ol > li:first-child{ color: red; }
結構性偽類選擇器 last-child
:last-child
選擇器選擇的是元素的最後一個子元素
html程式碼:
第一段落
第二段落
第三段落
第四段落
第五段落
CSS程式碼:
.post { padding: 10px; border: 1px solid #ccc; width: 200px; margin: 20px auto; }.post p { margin:0 0 15px 0; }.post p:last-child { margin-bottom:0; }
結構性偽類選擇器 nth-child(n)
:nth-child(n)
選擇器用來定位某個父元素的一個或多個特定的子元素。其中n
是其引數,而且可以是整數值(1,2,3,4),也可以是表示式(2n+1、-n+5)和關鍵詞(odd
、even
),但引數n的起始值始終是1,而不是0。也就是說,引數n的值為0時,選擇器將選擇不到任何匹配的元素。
html程式碼:
- item1
- item2
- item3
- item4
- item5
- item6
- item7
- item8
- item9
- item10
CSS程式碼:
ol > li:nth-child(2n){ //將偶數行列表背景色設定為橙色 background: orange; }
結構性偽類選擇器 nth-last-child(n)
:nth-last-child(n)
選擇器和前面的:nth-child(n)
選擇器非常的相似,只是這裡多了一個last
,所起的作用和:nth-child(n)
選擇器有所區別,從某父元素的最後一個子元素開始計算,來選擇特定的元素。
html程式碼:
- item1
- item2
- item3
- item4
- item5
- item6
- item7
- item8
- item9
- item10
- item11
- item12
- item13
- item14
- item15
CSS程式碼:
ol > li:nth-last-child(5){ background: orange; }
first-of-type選擇器
:first-of-type
選擇器類似於:first-child
選擇器,不同之處就是指定了元素的型別,其主要用來定位一個父元素下的某個型別的第一個子元素。
html程式碼:
我是一個塊元素,我是.wrapper的第一個子元素我是一個段落元素,我是不是.wrapper的第一個子元素,但是他的第一個段落元素
我是一個段落元素
我是一個塊元素
CSS程式碼:
.wrapper { width: 500px; margin: 20px auto; padding: 10px; border: 1px solid #ccc; color: #fff; }.wrapper > div { background: green; }.wrapper > p { background: blue; }/*我要改變第一個段落的背景為橙色*/.wrapper > p:first-of-type { background: orange; }
nth-of-type(n)選擇器
:nth-of-type(n)
選擇器和:nth-child(n)
選擇器非常類似,不同的是它只計算父元素中指定的某種型別的子元素。當某個元素中的子元素不單單是同一種型別的子元素時,使用:nth-of-type(n)
選擇器來定位於父元素中某種型別的子元素是非常方便和有用的。在:nth-of-type(n)
選擇器中的n
和:nth-child(n)
選擇器中的n
引數也一樣,可以是具體的整數,也可以是表示式,還可以是關鍵詞。
html程式碼:
我是一個Div元素我是一個段落元素
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
我是一個Div元素我是一個段落
CSS程式碼:
.wrapper > p:nth-of-type(2n){ background: orange; }
last-of-type選擇器
:last-of-type
選擇器和:first-of-type
選擇器功能是一樣的,不同的是他選擇是父元素下的某個型別的最後一個子元素。
html程式碼:
我是第一個段落
我是第二個段落
我是第三個段落
我是第一個Div元素我是第二個Div元素我是第三個Div元素
CSS程式碼:
.wrapper > p:last-of-type{ background: orange; }
nth-last-of-type(n)選擇器
:nth-last-of-type(n)
選擇器和:nth-of-type(n)
選擇器是一樣的,選擇父元素中指定的某種子元素型別,但它的起始方向是從最後一個子元素開始
html程式碼:
我是第一個段落
我是第二個段落
我是第三個段落
我是第四個段落
我是第五個段落
我是一個Div元素我是第六個段落
我是第七個段落
CSS程式碼:
.wrapper > p:nth-last-of-type(3){ background: orange; }
only-child選擇器
:only-child
選擇器選擇的是父元素中只有一個子元素,而且只有唯一的一個子元素。也就是說,匹配的元素的父元素中僅有一個子元素,而且是一個唯一的子元素。
html程式碼:
我是一個段落
我是一個段落
我是一個段落
CSS程式碼:
.post p { background: green; color: #fff; padding: 10px; }.post p:only-child { background: orange; }
only-of-type選擇器
:only-of-type
選擇器用來選擇一個元素是它的父元素的唯一一個相同型別的子元素。這樣說或許不太好理解,換一種說法。:only-of-type
是表示一個元素他有很多個子元素,而其中只有一種型別的子元素是唯一的,使用:only-of-type
選擇器就可以選中這個元素中的唯一一個型別子元素。
html程式碼:
我是一個段落
我是一個段落
我是一個段落
我是一個Div元素我是一個Div
- 我是一個列表項
我是一個段落
CSS程式碼:
.wrapper > div:only-of-type { background: orange; }
:enabled選擇器
在Web的表單中,有些表單元素有可用:enabled
和不可用:disabled
狀態,比如輸入框,密碼框,核取方塊等。在預設情況之下,這些表單元素都處在可用狀態。那麼我們可以透過偽選擇器:enabled
對這些表單元素設定樣式。
html程式碼:
CSS程式碼:
div{ margin: 20px; }input[type="text"]:enabled { background: #ccc; border: 2px solid red; }
:disabled選擇器
:disabled
選擇器剛好與:enabled
選擇器相反,用來選擇不可用表單元素。要正常使用:disabled
選擇器,需要在表單元素的HTML中設定disabled
屬性。
html程式碼:
CSS程式碼:
form { margin: 50px; }div { margin-bottom: 20px; }input { background: #fff; padding: 10px; border: 1px solid orange; border-radius: 3px; }input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); }
:checked選擇器
在表單元素中,單選按鈕和核取按鈕都具有選中和未選中狀態。(大家都知道,要覆寫這兩個按鈕預設樣式比較困難)。在CSS3中,我們可以透過狀態選擇器:checked
配合其他標籤實現自定義樣式,而:checked
表示的是選中狀態。
html程式碼:
CSS程式碼:
form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; }.wrapper { margin-bottom: 10px; }.box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; }.box input { opacity: 0; position: absolute; top:0; left:0; }.box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; }input[type="checkbox"] + span { opacity: 0; }input[type="checkbox"]:checked + span { opacity: 1; }
::selection選擇器
::selection
偽元素是用來匹配突出顯示的文字(用滑鼠選擇文字時的文字)
html程式碼:
“::selection”偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下,選擇網站文字是深藍的背景,白色的字型,
CSS程式碼:
::-moz-selection { background: red; color: green; }::selection { background: red; color: green; }
:read-only選擇器
:read-only
偽類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是,元素中設定了readonly=’readonly’
html程式碼:
CSS程式碼:
form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; }form > div { margin-bottom: 10px; }input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; }input[type="text"]:-moz-read-only{ border-color: #ccc; }input[type="text"]:read-only{ border-color: #ccc; }
:read-write選擇器
:read-write
選擇器剛好與:read-only
選擇器相反,主要用來指定當元素處於非只讀狀態時的樣式。
html程式碼:
CSS程式碼:
form { width: 300px; padding: 10px; border: 1px solid #ccc; margin: 50px auto; }form > div { margin-bottom: 10px; }input[type="text"]{ border: 1px solid orange; padding: 5px; background: #fff; border-radius: 5px; }input[type="text"]:-moz-read-only{ border-color: #ccc; }input[type="text"]:read-only{ border-color: #ccc; }input[type="text"]:-moz-read-write{ border-color: #f36; }input[type="text"]:read-write{ border-color: #f36; }
::before和::after
::before
和::after
這兩個主要用來給元素的前面或後面插入內容,這兩個常和content
配合使用,使用的場景最多的就是清除浮動。
.clearfix::before,.clearfix::after { content: "."; display: block; height: 0; visibility: hidden; }.clearfix:after {clear: both;}.clearfix {zoom: 1;}
當然,我們還可以使用它們來實現陰影效果
.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
上面程式碼作用在class名叫.effect上的div的前(before)後(after)都新增一個空元素,然後為這兩個空元素新增陰影特效。
作者:阿振_sc
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2730/viewspace-2813866/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS3簡明教程之初識CSS3CSSS3
- CSS3選擇器02—CSS3部分選擇器CSSS3
- css3選擇器CSSS3
- CSS3 - 選擇器CSSS3
- css3 選擇器:屬性選擇器(五)CSSS3
- CSS3屬性選擇器簡單介紹CSSS3
- css3 nth-child選擇器CSSS3
- CSS系列:CSS3新增選擇器CSSS3
- CSS3學習----選擇器、字型CSSS3
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- CSS3 相鄰兄弟選擇器 hoverCSSS3
- 神通廣大的CSS3選擇器CSSS3
- css3 nth-child() 選擇器 (遍歷選擇器的奇偶數)CSSS3
- CSS3選擇器及優先順序CSSS3
- SwiftUI 簡明教程之指示器SwiftUI
- 圖解CSS3 讀書筆記——選擇器圖解CSSS3筆記
- HTML5中CSS3的屬性選擇器HTMLCSSS3
- css3偽元素選擇器before 和 after 的使用CSSS3
- 【HTML5】Web前端——第四課:CSS3新增選擇器HTMLWeb前端CSSS3
- CSS3全覽_選擇符+特指+單位+字型CSSS3
- SwiftUI 簡明教程之自定義 ModifierSwiftUI
- SwiftUI 簡明教程之文字與圖片SwiftUI
- CSS3偽類選擇器:nth-child()(nth-child(odd)/nth-child(even))CSSS3
- 圖解css3:核心技術與案例實戰.2.1 認識CSS選擇器圖解CSSS3
- CSS3新特性(樣式、選擇器、顏色漸變、2D3D、動畫)CSSS33D動畫
- 特徵工程之特徵選擇特徵工程
- 好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器程式設計師Web前端HTMLCSS筆記S3
- 好程式設計師HTML5培訓教程-總結30個CSS3選擇器程式設計師HTMLCSSS3
- 《HTML5與CSS3權威指南(第3版·下冊)》——第19章選 擇 器HTMLCSSS3
- CSS3 單選框動畫特效CSSS3動畫特效
- Html5,css3選單HTMLCSSS3
- jQuery起點教程之使用選擇器和事件(3)jQuery事件
- 機器學習 特徵工程之特徵選擇機器學習特徵工程
- css3 動畫(三)animation 簡介CSSS3動畫
- Web開發者選擇的最佳HTML5/CSS3程式碼生成器WebHTMLCSSS3
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- CSS3屬性選擇器之:教你區分E[attr*=val]和E[attr~=val]的使用方法!!CSSS3