大家都知道div+css是實現網頁布局的一**寶，它可以實現對網頁各個元素的精確定位和布局。那麼css（樣式表）是怎樣實現對html文件的中元素的樣式設定的呢？這就要涉及到乙個概念：css選擇器。
/*簡單的css樣式*/
.content
/*html中的內容*/
這是乙個簡單的div+css的demo
網頁的預覽效果是：「這是乙個簡單的div+css的demo」這句話的文字顏色是紅色
通過上面這個最簡單的例子我們可以發現：css中的樣式要想實現對html文件中元素的控制，需要某種對應關係（上例中的「content」就是二者的聯絡所在），根據這種對應關係（可以是一對
一、一對多或者多對多），css實現對html的樣式控制。我們就將這種通過對應關係實現樣式控制的東西叫做css選擇器。
css選擇器有很多種（隨版本的不同而變化），下面我為大家介紹幾種最常見的css選擇器
id選擇器
id選擇器是通過元素的id來進行選擇的，對於同乙個html頁面，每乙個元素的id都是惟一的，所以id選擇器具有唯一性
在樣式表中，id選擇器前面以「#」進行標識，下面舉例說明
/*id選擇器的css樣式*/
#content
/*html中的內容*/
這是乙個id選擇器的例子
網頁的預覽效果是：「這是乙個id選擇器的例子」這句話的字型大小是14畫素
類選擇器
類選擇器是通過元素的class屬性值來進行選擇的，多個元素可以同時具有相同的class屬性值，所以它可以實現「一對多」的樣式控制。凡是具有相同class屬性值的元素都會應用對應的樣式。
在樣式表中，類選擇器前面以「.」進行標識，下面舉例說明
/*類選擇器的css樣式*/
.content
/*html中的內容*/
這是乙個類選擇器的例子1
下面是乙個段落
這是乙個類選擇器的例子2
網頁的預覽效果是：「這是乙個類選擇器的例子1」和「這是乙個類選擇器的例子2」兩句話的背景色是紅色的，而「下面是乙個段落」這句話沒有樣式。
標籤選擇器
標籤選擇器是通過元素的標籤進行選擇的。大家都知道html頁面中的元素都是通過標籤進行整合的，具有相同標籤的元素就會應用相同的樣式
在樣式表中，標籤選擇器的前面什麼都不用加，只需寫出標籤名即可，下面舉例說明
/*標籤選擇器的css樣式*/ p
/*html中的內容*/
段落1下面是乙個段落
段落2
網頁的預覽效果是：「段落1」和「段落2」兩句話的字型是藍色的，大小是12畫素；「下面是乙個段落」這句話沒有任何樣式
偽類選擇器
最常用的偽類選擇器就是對連線標籤應用的選擇器，下面舉例說明 /*
偽類選擇器的css樣式*/
a:link
a:visited
a:hover
/*html中的內容*/
網頁的預覽效果是：連線預設沒有下劃線，當滑鼠懸停時有下滑下，訪問過後沒有下劃線
屬性選擇器
屬性選擇器是根據特定標籤的特定屬性值或者是屬性的有無來進行選擇的，舉例如下
/*屬性選擇器的css樣式*/
p[title]
或者p[title="123"]
如果標籤有「title」屬性，則將該段設為字型14畫素；如果標籤的「title」屬性值為「123」，則將該段設為字型18畫素
後代選擇器
後代選擇器是通過指定父代的所有指定後代（包括直接後代和深層次後代）進行選擇的，它通常由兩個常用標籤組合形成。通過使用後代選擇器，可以實現更精確的樣式控制，是非常常用的一種css選擇器。
父選擇器和後代選擇器之間以空格分隔，下面舉例說明：
/*後代選擇器的css樣式*/
.father p
/*html中的內容*/
這是父元素
這是子元素
網頁的預覽效果是："這是父元素"這句話沒有樣式，而「這是子元素」這句話的字型顏色是藍色
子選擇器
子選擇器與後代選擇器非常類似，他們的區別是：後代選擇器將樣式用到父元素的所有後代當中（包括直接後代和深層次後代），而子選擇器只將樣式用到父元素的直接後代元素，只有「兒子」能用到、「孫子」以及「重孫子」用不到。
父選擇器和子選擇器之間以「>」分隔，下面舉例說明
/*子選擇器的css樣式*/
.father>.son
/*html中的內容*/
這是子元素
這是孫子元素
網頁的預覽效果是："這是子元素"這句話的背景色是藍色的；「這是孫子元素」這句話的背景色是白色的（沒有樣式）
如果將「>」改為空格 即 「」.father .son"，則兩句話的背景色都是藍色的。
通用選擇器
通用選擇器即應用於所有標籤的選擇器，用「*」表示，舉例如下：
/*通用擇器的css樣式*/ *
將所有「盒子」的外邊距和內邊距都設為0，這句話通常用在css樣式表的開頭，用作初始化。
希望這篇文章能對初學div+css的朋友們有所幫助
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...