css3新增了
p ~ p選擇該屬性以特定值開頭的元素
選擇該屬性以特定值結尾的元素
選擇該屬性**現了特定值的元素
上邊三個是可以組合使用的,方法如 ↓ :
實際中可以應用在區分本地鏈結與外部鏈結,通過判斷是否有http\.com什麼的(等到css4選擇器問世就不用這麼麻煩了[:local-link])
從字面大概能看出來是幹嘛使得,第乙個這個型別的/最後乙個這個型別的...
如上圖所示,每個元素內的第乙個p與最後乙個p都應用了該樣式;
選擇僅僅僅有乙個此型別的子元素,不包含子元素的子元素;
選擇僅有乙個子元素的元素;
如果去掉:only-child前邊的p,那個孤獨的span也會應用該樣式;
同樣可以使用:not反選,
選擇第n個子元素,可以結合選擇器來限制
基本同上...只不過是從後往前數
這個跟上邊的讓我很蛋疼- -這兩者的區別一直讓人很凌亂,詳情看下圖
通過w3school上邊做的.
p:nth-child(2)將父元素中子元素第二個為p的p的顏色設為紅色,
p:nth-of-type(2)將子元素中的第二個p背景色設為綠色- -好亂的;
我認為兩者的卻別在於,nth-of-type計數過濾標籤型別,而nth-child計數不過濾;
這個不做解釋了...反之
選取父元素中最後乙個子元素
選擇文件根節點- -相當於 html {},但是權重要比html高,因為人家是偽類,沾點類就比標籤高- -;
選擇沒有子元素的標籤,額,這個一般沒什麼大用,因為文字節點也是節點,一般就是**有空單元格,列表有空項,然後做點處理,用js選擇空元素時這個挺有用的;
w3c給的解釋是設定活動的id的樣式,其實就是瀏覽器路徑上邊綴著#什麼,就選著什麼 傳送陣;
用於表單元素是否可用的偽類;
:enabled為可用,:disabled反之;
用於多選及單選被選中的偽類;
這個就不多說了- -上邊用了那麼多了;
被選中文字的樣式;
css3選擇器帶來了極大的便利,上文有什麼不對或不詳細,還請指出.有點虎頭蛇尾了,哈哈
再來幾個css4前瞻的
CSS3新特性與選擇器
圓角效果 border radius 10px 所有角都使用半徑為10px的圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角，順時針 陰影 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式...
CSS3新特性（二）選擇器
一 基礎選擇器 1 通配選擇器 2 元素選擇器e 3 id選擇器 id 4 class.class 5 群組選擇器e,f 二 層次選擇器 1 後代選擇器e f 2 子選擇器e f 3 相鄰選擇器e f 4 通用兄弟選擇器e f 三 屬性選擇器 1 e attr 選擇具有att屬性的e元素 2 e a...
css3的新特性選擇器 屬性選擇器
自己學css的時候比較亂，這次趁著複習把css3的新特性選擇器和css2以前不怎麼用的選擇器做乙個總結 div id parent p i m a example p p id one i m a example p p i m a example p p i m a example p p i m...