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選擇器 根據元素id屬性 並且三種選擇器可以相互結合使用 二 更多 三 選擇器表 四 詳解 設定p元素行高1.5em,距離外填充1em 後代選擇器，該選擇器定位元素e的後代中所有元素f...

css選擇器大全

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