css選擇器大全

選擇器是css的核心，從最初的元素、class/id選擇器，演進到偽元素、偽類，以及css3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。

p

ul li

ul > li//僅限ul的直接子元素li，如果li裡面還巢狀著另乙個 ul 結構時，最裡面的 li 將被忽略

li + li//定位具有相同父元素ul裡除第乙個li之外的所有li

h1 ~ p//定位具有相同父元素的，h1標籤之後的所有p標籤

input[required]//定位頁面裡所有具有必填屬性"required"的input

input[type=password]//定位頁面裡的密碼輸入框

p[class|=a]//定位頁面裡所有的p段落裡具有class屬性且屬性值為a或是a-開始的，比如class="a"以及class="a-b"

div[title~=english]//定位頁面裡所有具有屬性title且屬性值裡擁有完整單詞english的div容器，比如title="english"以及title="a english"

div[class^=a]//定位頁面裡具有屬性class且屬性值以a開頭的div容器，比如class="a"以及class="ab"

div[class$=a]//定位頁面裡具有屬性class且屬性值以a結尾的div視窗，比如class="nba"以及class="cba"

a[title*=link]//定位所有title裡具有link字串的a鏈結

input:focus//輸入框獲得焦點時的樣式

input:enabled

:disabled：已禁用的介面元素：

input:disabled

"#info:target "//當訪問的url**為 123.html#info 時，id="info"將載入這個字型樣式

input:valid//當輸入框驗證為有效時載入這個邊框樣式，基於type或pattern屬性

input:invalid//當輸入框為空且必填時，或已填寫但驗證無效時，載入此邊框樣式

div.class p:nth-child(3)//class="class"的div容器裡的第3個元素p，如果第3個子元素不是p，此樣式將失效

p:not(.info)//匹配所有class值不為info的p元素

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

::selection//定義選中的文字顏色與背景色

當然，如果要方便的使用這些強大的css選擇器的話，使用chrome、firefox之類的瀏覽器吧，最起碼得拋棄ie9以下的ie版本瀏覽器吧。

CSS選擇器大全

選擇器 例子例子描述 css.class intro 選擇 class intro 的所有元素。1 id firstname 選擇 id firstname 的所有元素。1 選擇所有元素。2element p選擇所有元素。1element,element div,p 選擇所有元素和所有元素。1ele...

CSS 選擇器大全

一 概念 css中的選擇器有很多種，常用的分別是標籤選擇器 根據元素標籤名稱 類選擇器 根據元素class屬性 id選擇器 根據元素id屬性 並且三種選擇器可以相互結合使用 二 更多 三 選擇器表 四 詳解 設定p元素行高1.5em,距離外填充1em 後代選擇器，該選擇器定位元素e的後代中所有元素f...

CSS 選擇器大全

一 概念 css中的選擇器有很多種，常用的分別是標籤選擇器 根據元素標籤名稱 類選擇器 根據元素class屬性 id選擇器 根據元素id屬性 並且三種選擇器可以相互結合使用 二 更多 三 選擇器表 四 詳解 設定p元素行高1.5em,距離外填充1em 後代選擇器，該選擇器定位元素e的後代中所有元素f...