浅析CSS选择器
假設(shè)存在如下元素:
<p>who am i</p>元素選擇器:
一個(gè)元素用同一種樣式:
p {color:green; }多個(gè)元素用同一種樣式:
p,h1,h2{color:green; }所有元素的背景色為黑色:
* {background:black; }<div>內(nèi)所有元素的字體顏色為黑色:
div * {color:black; }屬性選擇器:
將一個(gè)元素加入一個(gè)類,只需要增加屬性“class”,并提供一個(gè)類名。
<p class="greentea"> who am i<p/>在CSS中編寫屬性屬性選擇器,以下代碼會(huì)造成所有包含“greentea”屬性的p元素字體變綠:
p.greentea{ color:green; }如果希望“greentea”類中所有的元素都有同一種樣式:
.greentea{ color:green; }如果要對(duì)所有<blockquote>元素做同樣處理,可以這樣:
blockquote.greentea , p.greentea {color:green; }?
?id選擇器:
首先對(duì)p元素增加一個(gè)id:
<p id="footer">who am i</p>選擇id為“footer”的任意元素,id是唯一的:
#footer{color:red; }選擇一個(gè)id為“footer”的<p>元素:
P#footer{color:red; }?
?選擇子孫:
選擇<div>中的所有子孫<p>元素,<div>是父元素,<p>是子元素,中間有一個(gè)空格符。
div p {color:black; }選擇id為“footer”的元素的所有子孫?<p>元素,footer為父元素id,<p>是子元素,中間有一個(gè)空格符。
#footer p{color:black; }?選擇id為“footer”的元素的直接孩子<p>元素:
#footer>p{color:black; }?選擇id為“footer”的元素的孩子<p>元素的孩子<blockquote>元素:
#foot p blcokquote{color:blue; }?假設(shè)有如下兩個(gè)屬性:greentea和blacktea,blacktea屬性所在元素 為 greentea屬性所在元素的孩子:
<p class="greentea">who am i,<em class="blacktea">do you know</em> </p>選擇有g(shù)reentea屬性的所有元素中 孩子元素帶blacktea 屬性的 ,并設(shè)置顏色為黑色,中間有一個(gè)空格:
.greentea .blacktea{color:black; }?偽類:
元素 + 冒號(hào),中間沒有空格。
未訪問狀態(tài)的鏈接:
a:link{color:green; }已訪問的鏈接:
a:visited{color:red; }鼠標(biāo)懸停在鏈接上:
a:hover{color:yellow; }?焦點(diǎn)在鏈接上:
a:focus{color:blue; }活動(dòng)狀態(tài)(用戶第一次單擊鏈接時(shí)):
a:active{color:black; }?一般的順序?yàn)?#xff1a;link、visited、hover、focus、active。
?
在id為footer的元素中所有未訪問的<a>元素指定顏色為青綠色:
#footer a:link{color:#007e7e; }?
?
?
?
?
?
總結(jié)
- 上一篇: 字符串的模式匹配--BF算法KMP算法
- 下一篇: CSS3动画和VUE动画整理