CSS 選擇器大全

一、概念：

css中的選擇器有很多種，常用的分別是標籤選擇器(根據元素標籤名稱)，類選擇器(根據元素class屬性)，id選擇器(根據元素id屬性)，並且三種選擇器可以相互結合使用

二、更多：

三、選擇器表：

四、詳解：

//設定p元素行高1.5em,距離外填充1em 

後代選擇器，該選擇器定位元素e的後代中所有元素f

// 定位ul內的所有li元素

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

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

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

//定位頁面裡的密碼輸入框

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

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

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

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

//定位所有title裡具有link字串的a鏈結

a:link

//未訪問時，字型為黑色，字型大小為12畫素

//訪問後，字型為紅色，字型大小為22畫素

//滑鼠按住並懸停時，字型為藍色，字型大小為16畫素

//滑鼠一鬆開時，字型為紫色，字型大小為18畫素

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

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

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

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

//class="class"的div容器裡的第3個元素p，如果第3個子元素不是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...個元素

//匹配所有class值不為info的p元素

//在頁面的a鏈結的後面插入文字link

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

CSS選擇器大全

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

css選擇器大全

選擇器是css的核心，從最初的元素 class id選擇器，演進到偽元素 偽類，以及css3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發的簡單。p ul li ul li 僅限ul的直接子元素li，如果li裡面還巢狀著另乙個 ul 結構時，最裡面的 li 將被忽略 li li 定位具有相...

CSS 選擇器大全

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