2022-11-06 分類: 網(wǎng)站建設(shè)
選擇器是CSS的核心,從最初的元素、class/id選擇器,演進(jìn)到偽元素、偽類,以及CSS3中提供的更豐富的選擇器,定位頁面上的任意元素開始變得愈發(fā)的簡單。
1、元素選擇器這是最基本的CSS選擇器,HTML文檔中的元素本身就是一個選擇器:
p {line-height:1.5em; margin-bottom:1em;}
2、關(guān)系選擇器E F:后代選擇器,該選擇器定位元素E的后代中所有元素F:
ul li {margin-bottom:0.5em;}
E F:子選擇器,該選擇器定位元素E的直接子元素中的所有元素F,它將忽略任何進(jìn)一步的嵌套: ul li {list-style:none;} //僅限ul的直接子元素li,如果li里面還嵌套著另一個 ul 結(jié)構(gòu)時,最里面的 li 將被忽略>E + F:相鄰兄弟選擇器,該選擇器定位與元素E具有相同父元素且在標(biāo)記中緊鄰E的元素F: li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一個li之外的所有l(wèi)i
E ~ F:一般兄弟選擇器,該選擇器定位與元素E具有相同父元素且在標(biāo)記中位于E之后的所有元素F:>h1 ~ p {color:#f00;} //定位具有相同父元素的,h1標(biāo)簽之后的所有p標(biāo)簽
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結(jié)尾的任何元素E:
div[class$=a] {color:#f00;} //定位頁面里具有屬性class且屬性值以a結(jié)尾的div窗口,比如class="nba"以及class="cba"
E[attr*=val]:該選擇器與E[attr~=val]相似,但更進(jìn)一步,定位具有屬性attr且屬性值任意位置包含val的元素E,val可以是一個完整的單詞,也可以是一個單詞中的一部分:
a[title*=link] {text-decoration:underline;} //定位所有title里具有l(wèi)ink字符串的a鏈接
4、偽類
:link:未訪問的鏈接;
:visited:已訪問的鏈接,不建議使用;
:hover:鼠標(biāo)移動到容器,不僅限于鏈接,可用于頁面中的任何元素;
:active:被激活時的狀態(tài),不僅限于鏈接,可用于任何具有tabindex屬性的元素;:focus:獲得焦點時狀態(tài),不僅限于鏈接,可用于任何具有tabindex屬性的無線:
input:focus {border:1px solid #333;} //輸入框獲得焦點時的樣式
:enabled:已啟用的界面元素:
input:enabled {border:1px solid #899;}
:disabled:已禁用的界面元素:
input:disabled {background:#eee;}
:target:該選擇器定位當(dāng)前活動頁面內(nèi)定位點的目標(biāo)元素:
#info:target {font-size:24px;} //當(dāng)訪問的URL網(wǎng)址為 123.html#info 時,id="info"將加載這個字體樣式
:default:應(yīng)用于一個或多個作為一組類似元素中的默認(rèn)元素的UI元素;
:valid:應(yīng)用于有效元素:
input:valid {border:1px solid #6a6;} //當(dāng)輸入框驗證為有效時加載這個邊框樣式,基于type或pattern屬性
:invalid:應(yīng)用于空的必填元素,以及未能與type或pattern屬性所定義的需求相匹配的元素:
input:invalid {border:1px solid #f00;} //當(dāng)輸入框為空且必填時,或已填寫但驗證無效時,加載此邊框樣式
:in-range:應(yīng)用于具有范圍限制的元素,其中該值位于限制內(nèi);比如具有min和max屬性的number和range輸入框;
ut-of-range:與:in-range選擇相反,其中該值在限制范圍外;
:required:應(yīng)用于具有必填屬性required的表單控件;
ptional:應(yīng)用于沒有必填屬性required的所有表單控件
:read-only:應(yīng)用于其內(nèi)容無法供用戶修改的元素;
:read-write:應(yīng)用于其內(nèi)容可供用戶修改的元素,比如輸入框;: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的倒數(shù)第n個子元素的元素F;
E:nth-of-type(n):該選擇器定位元素E的第n個指定類型子元素;
E:nth-lash-of-type(n):該選擇器定位元素E的導(dǎo)數(shù)第n個指定類型子元素:
.class p:nth-child(2) 與 .class p:nth-of-type(2) 的區(qū)別在于,如果.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 可以使用數(shù)字靜態(tài)式,比如 .nth-child(2n+1) 將匹配第1、3、5...個元素
E:first-child:父元素的第一個子元素E,與:nth-child(1)相同;
E:last-child:父元素的倒數(shù)第一個子元素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:沒有子元素的元素,沒有子元素包括文本節(jié)點;
E:lang(en):具有使用雙字母縮寫(en)表示的語言的元素;
E:not(exception):該選擇器將選擇與括號內(nèi)的選擇器不匹配的元素:
p:not(.info) {font-size:12px;} //匹配所有class值不為info的p元素
5、偽元素
偽元素可用于定位文檔中包含的文本,為與偽類進(jìn)行區(qū)分,偽元素使用雙冒號 :: 定義,但單冒號 : 也能被識別。
::first-line:匹配文本首行;
::first-letter:匹配文本首字母;
::before 與 ::after :使用 contnet 屬性生成額外的內(nèi)容并插入在標(biāo)記中:a[href^=http]::after {content:"link"} //在頁面的a鏈接的后面插入文字link
::selection:匹配突出顯示的文本:
::selection {background:#444; color:#fff;} //定義選中的文本顏色與背景色
當(dāng)然,如果要方便的使用這些強大的
CSS選擇器
的話,使用Chrome、Firefox之類的瀏覽器吧,最起碼得拋棄IE9以下的IE版本瀏覽器吧。
分享標(biāo)題:CSS選擇器的使用詳細(xì)說明
標(biāo)題路徑:http://m.rwnh.cn/news10/211060.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、域名注冊、網(wǎng)站排名、面包屑導(dǎo)航、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容