Jquery中文網 www.2030036.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css的選擇器的詳細介紹

css的選擇器的詳細介紹

發布時間:2020-05-07   編輯:www.2030036.live
jquery中文網為您提供css的選擇器的詳細介紹等資源,歡迎您收藏本站,我們將為您提供最新的css的選擇器的詳細介紹資源
選擇器是可以選擇指定那個樣式了,今天我們來看一篇關于選擇器的一個用法,希望這篇文章能夠幫助到各位理解到css的選擇器了,具體的細節如下文介紹。

前言

css選擇器,是前端的基本功,只要你是一個前端,這個一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再復習一下css選擇器中的一些常用符號的使用,例如“ 、~、^、$、>、*”等的使用!之所以要復習呢,是因為我一個寫后端的哥們,前端寫的也很好,但是他今天突然問我,css中加號和大于號是啥意思?我說,這個貌似jquery中也有吧!好吧,可能這些符號不常用,造成我們對這些符號的陌生!那么今天,我們一起再來復習一下吧!

大家在右側搜索框中搜索“選擇器”,會發現,我之前寫過css用偽類nth-child,進行奇偶行的選擇。今天,關于css3偽類選擇器,我就不多描述了!同時大家也可以看一下我之前寫的“jquery常用選擇器總結”,其實,jquery選擇器和css選擇器類似!特別是在屬性選擇和組合選擇上面!

基本選擇器

ID選擇器:#header {}
類選擇器:.header {}
元素選擇器:div {}
子選擇器:ul > li {}
后代選擇器:div p {}
偽類選擇器:a:hover {}
屬性選擇器:input[type="text"] {}
id優先級高于類class;
后面的樣式覆蓋前面的;
指定的高于繼承;

css選擇器之特殊符號

1、>(大于號)

大于號代表選擇子元素,這個我們經常用,值得注意的是 h1>strong 和h1 strong的區別

這2個都是選擇子元素,但是 h1>strong 只選擇某個元素的子元素。例如如下:

<h1>This is <strong class="haorooms">very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1>strong ,只有第一個h1下面的strong被選中,第二個不起作用。但是 h1 strong,所有的h1下面的strong都被選中了。

2、 號

選擇相鄰兄弟,這點和jquery相同。

例如:

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

h1 p {margin-top:50px;} //h1后面的第一個p元素會有50px的間距。代表選擇緊接在 h1 元素后出現的段落
屬性選擇器

css屬性選擇器用處也比較多,之前參加第二節css開發者大會的時候,有的老師分享,他們公司基本上都是用屬性選擇器來寫css,這樣字面明了,他們都不怎么用class。我感覺這個要分情況,那個老師講的項目是angularjs的,因此屬性選擇器比較實用!

舉幾個例子

1、把包含標題(title)的所有元素變為紅色

如下寫:

*[title] {color:red;}
2、將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置為紅色

a[href][title] {color:red;}
3、指定將http://www.111cn.net /post/css_wl_wys 這篇文字顏色變紅

a[href="http://www.111cn.net /post/css_wl_wys"] {color: red;}

當然也可以多個屬性一起,這里就不多舉例了!

4、屬性與屬性值必須完全匹配

我們來看一個class的div

<p class="important haorooms">This paragraph is a very important warning.</p>
我們用class選擇,大家都曉得,很簡答,但是用屬性選擇,我們用如下:

p[class="important"]
是選擇不到的,因為還有一個haorooms。因此,必須這樣寫:

p[class="important haorooms"] {color: red;}
5、根據部分屬性值選擇

看到上面多個屬性必須完全匹配,很不爽,那么有沒有可以部分匹配屬性的方法呢?答案是有的。還是上面的例子,我們如下選擇就可以了!

p[class~="haorooms"] {color: red;}
如果需要根據屬性值中的詞列表的某個詞進行選擇,則需要使用波浪號(~)。

6、字符串匹配屬性選擇器

上面說到了~(波浪號選擇),有朋友會把他和*= 搞混,例如,如下例子:

<p  haorooms="importanthaorooms">This paragraph is a very important warning.</p>
我們可以用[haorooms * ="haoroom"]來選擇,這個和~的區別就是包含,~是幾個屬性直接有空格,空格中的一個。*=沒有空格,但是包含某個字符。除此之外,還有開頭選擇和結尾選擇,和jquery類似:

[haorooms^="haorooms"]           選擇 haorooms 屬性值以 "haorooms" 開頭的所有元素
[haorooms$="haorooms"]          選擇 haorooms 屬性值以 "haorooms" 結尾的所有元素

7、特定屬性選擇類型

請看下面的例子:

*[lang|="en"] {color: red;}

上面這個規則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此,以下示例標記中的前三個元素將被選中,而不會選擇后兩個元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

CSS的基本選擇器

1、元素選擇器

這是最基本的CSS選擇器,HTML文檔中的元素本身就是一個選擇器:

p {line-height:1.5em; margin-bottom:1em;}

2、關系選擇器

E F:后代選擇器,該選擇器定位元素E的后代中所有元素F:

ul li {margin-bottom:0.5em;}

E > F:子選擇器,該選擇器定位元素E的直接子元素中的所有元素F,它將忽略任何進一步的嵌套:

ul > li {list-style:none;} //僅限ul的直接子元素li,如果li里面還嵌套著另一個 ul 結構時,最里面的 li 將被忽略

E F:相鄰兄弟選擇器,該選擇器定位與元素E具有相同父元素且在標記中緊鄰E的元素F:

li li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一個li之外的所有li

E ~ F:一般兄弟選擇器,該選擇器定位與元素E具有相同父元素且在標記中位于E之后的所有元素F:

h1 ~ p {color:#f00;} //定位具有相同父元素的,h1標簽之后的所有p標簽

 

3、屬性選擇器

E[attr]:該選擇器定位具有屬性attr的任何元素E:

input[required] {border:1px solid #f00;} //定位頁面里所有具有必填屬性"required"的input

E[attr=val]:該選擇器定位具有屬性attr且屬性值為val的任何元素E:

input[type=password] {border:1px solid #aaa;} //定位頁面里的密碼輸入框

E[attr|=avl]:該選擇器定位具有屬性attr且屬性值為val或以val-開始的任何元素E:

p[class|=a] {color:#333;} //定位頁面里所有的P段落里具有class屬性且屬性值為a或是a-開始的,比如class="a"以及class="a-b"

E[attr~=val]:該選擇器定位具有屬性attr且屬性值為完整單詞 val 的任何元素E:

div[title~=english] {color:#f88;} //定位頁面里所有具有屬性title且屬性值里擁有完整單詞english的div容器,比如title="english"以及title="a english"

E[attr^=val]:該選擇器定位具有屬性attr且屬性值以val開頭的任何元素E:

div[class^=a] {color:#666;} //定位頁面里具有屬性class且屬性值以a開頭的div容器,比如class="a"以及class="ab"

E[attr$=val]:該選擇器與E[attr^=val]正好相反,定位具有屬性attr且屬性值以val結尾的任何元素E:

div[class$=a] {color:#f00;} //定位頁面里具有屬性class且屬性值以a結尾的div窗口,比如class="nba"以及class="cba"

E[attr*=val]:該選擇器與E[attr~=val]相似,但更進一步,定位具有屬性attr且屬性值任意位置包含val的元素E,val可以是一個完整的單詞,也可以是一個單詞中的一部分:

a[title*=link] {text-decoration:underline;} //定位所有title里具有link字符串的a鏈接

4、偽類

:link:未訪問的鏈接;

:visited:已訪問的鏈接,不建議使用;

:hover:鼠標移動到容器,不僅限于鏈接,可用于頁面中的任何元素;

:active:被激活時的狀態,不僅限于鏈接,可用于任何具有tabindex屬性的元素;

:focus:獲得焦點時狀態,不僅限于鏈接,可用于任何具有tabindex屬性的無線:

input:focus {border:1px solid #333;} //輸入框獲得焦點時的樣式

:enabled:已啟用的界面元素:

input:enabled {border:1px solid #899;}

:disabled:已禁用的界面元素:

input:disabled {background:#eee;}

:target:該選擇器定位當前活動頁面內定位點的目標元素:

#info:target {font-size:24px;} //當訪問的URL網址為 123.html#info 時,id="info"將加載這個字體樣式

:default:應用于一個或多個作為一組類似元素中的默認元素的UI元素;

:valid:應用于有效元素:

input:valid {border:1px solid #6a6;} //當輸入框驗證為有效時加載這個邊框樣式,基于type或pattern屬性

:invalid:應用于空的必填元素,以及未能與type或pattern屬性所定義的需求相匹配的元素:

input:invalid {border:1px solid #f00;} //當輸入框為空且必填時,或已填寫但驗證無效時,加載此邊框樣式

:in-range:應用于具有范圍限制的元素,其中該值位于限制內;比如具有min和max屬性的number和range輸入框;

:o ut-of-range:與:in-range選擇相反,其中該值在限制范圍外;
:required:應用于具有必填屬性required的表單控件;

:o ptional:應用于沒有必填屬性required的所有表單控件
:read-only:應用于其內容無法供用戶修改的元素;

:read-write:應用于其內容可供用戶修改的元素,比如輸入框;

:root:根元素,始終指html元素;

E F:nth-child(n):該選擇器定位元素E的第n個子元素的元素F:

div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3個元素p,如果第3個子元素不是p,此樣式將失效

E F:nth-last-child(n):該選擇器定位元素E的倒數第n個子元素的元素F;

E:nth-of-type(n):該選擇器定位元素E的第n個指定類型子元素;

E:nth-lash-of-type(n):該選擇器定位元素E的導數第n個指定類型子元素:

.class p:nth-child(2) 與 .class p:nth-of-type(2) 的區別在于,如果.class里的第2個子元素不是P元素時,.class p:nth-child(2) 的樣式將無效,而.class p:nth-of-type(2) 將定位在 .class 里的第2個p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n),這其中的 n 可以使用數字靜態式,比如 .nth-child(2n 1) 將匹配第1、3、5...個元素

E:first-child:父元素的第一個子元素E,與:nth-child(1)相同;

E:last-child:父元素的倒數第一個子元素E;

E:first-of-type:與:nth-of-type(1)相同;

E:last-of-type:與:nth-last-of-type(1)相同;

E:only-child:父元素中唯一的子元素E;

E:only-of-type:父元素中唯一具有該類型的元素E;

E:empty:沒有子元素的元素,沒有子元素包括文本節點;

E:lang(en):具有使用雙字母縮寫(en)表示的語言的元素;

E:not(exception):該選擇器將選擇與括號內的選擇器不匹配的元素:

p:not(.info) {font-size:12px;} //匹配所有class值不為info的p元素

5、偽元素

偽元素可用于定位文檔中包含的文本,為與偽類進行區分,偽元素使用雙冒號 :: 定義,但單冒號 : 也能被識別。

::first-line:匹配文本首行;

::first-letter:匹配文本首字母;

::before 與 ::after :使用 contnet 屬性生成額外的內容并插入在標記中:

a[href^=http]::after {content:"link"} //在頁面的a鏈接的后面插入文字link

::selection:匹配突出顯示的文本:

::selection {background:#444; color:#fff;} //定義選中的文本顏色與背景色

當然,如果要方便的使用這些強大的CSS選擇器的話,使用Chrome、Firefox之類的瀏覽器吧,最起碼得拋棄IE9以下的IE版本瀏覽器吧。

您可能感興趣的文章:
jquery選擇器-根據多個屬性選擇示例代碼
jQuery中選擇器小問題(新人難免遇到)
jquery選擇器大全 全面詳解jquery選擇器
Jquery中的層次選擇器與find()的區別示例介紹
關于jquery的多個選擇器的使用示例
jQuery基本選擇器選擇元素使用介紹
jquery選擇器之內容過濾選擇器詳解
jquery屬性選擇器not has怎么寫 行懸停高亮顯示
jQuery的選擇器中的通配符使用介紹
使用jQuery內容過濾選擇器選擇元素實例講解

[關閉]
888棋牌金花app 股票推荐3 北京快3开奖手机版 配资炒股_杨方配资平台 北京快乐8开奖直播 河北快三跨度走势图带连线 pk10开奖官网 体彩浙江6+1开奖结果体彩 开奖结果-广东快乐十分 浙江11选5工具图表 昨天晚上的七位数开奖号码