CSS選擇器總結

今天在做demo的時候偶然發現 自己對css選擇器的使用並不熟練  遂即在w3school上把內容又看了一遍

下面做些整理

1.元素選擇器    直接使用標籤即元素選擇

html 

h1 h2 h2, p    同時應用在h2和p

*    使文件中所有元素的 color 屬性值指定為 red

3.類選擇器.important   等同於  *.important 
結合元素選擇器來使用   p.important 只設定p裡面類名為important的顏色變紅
多類選擇器  ie7之前無法處理多類選擇器
class="important warning">   可以設定.important.warning或者.warning.important效果一樣  即類名順序不限
但是一定要匹配！
class="important urgent ">如果設定 .important.warning結果是不能匹配的  樣式設定無效

#intro

選擇器與類選擇器的區別

1）與類不同，在乙個 html 文件中，id 選擇器會使用一次，而且僅一次。

2）不同於類選擇器，id 選擇器不能結合使用，因為 id 屬性不允許有以空格分隔的詞列表。 （有多類選擇器 但沒有多id選擇器）

3）id能包含更多含義

html 和 xhtml 將類和 id 值定義為區分大小寫，所以類和 id 值的大小寫必須與文件中的相應值匹配。

5.屬性選擇器

*[title]     把包含標題（title）的所有元素變為紅色a[href][title]      同時有 href 和 title 屬性的 html 超連結的文字設定為紅色a[href=""][title="w3school"]          只選擇有特定屬性值的元素，屬性與屬性值必須完全匹配

如下圖 提供了屬性選擇器更多規範

h1 em    即h1元素中有em元素,需要注意的是兩個元素之間的層次間隔可以是無限的，無論em的巢狀層有多深，只要是h1的後代元素，都可以被找到

7.子元素選擇器
如果從右向左讀，選擇器 h1 > strong 可以解釋為「選擇作為 h1 元素子元素的所有 strong 元素」。
在具體例子中分析
very  very變紅
無變化

h1 > strong

h1 + p

9.偽類 偽類名稱對大小寫不敏感。

1）超連結 l-v-h-a即 a:link 未訪問預設,a:visited 訪問後,a:hover 滑鼠放在上面,a:active 滑鼠按下。 必須遵循嚴格的順序h在l-v後，a在h後。

2）:focus 獲得焦點 ie8以上支援

3）:first-child

首個子物件，容易誤解，特別注意。

these are the necessary steps:

變粗donotpush the brake at the same time as the accelerator.
無變化p:first-child 
li:first-child 
結果是一些文字~段落中的引用~一些文字。

:first-line偽元素用於向文字的首行設定特殊樣式。 只能用於塊級元素

:first-letter 偽元素用於向文字的首字母設定特殊樣式 只能用於塊級元素

:before 偽元素可以在元素的內容前面插入新內容

:after 偽元素可以在元素的內容之後插入新內容

css選擇器 CSS選擇器總結

在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分，有人也稱這種選擇器為css3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...