css選擇器規定了css規則用於那些元素上
選擇器示例
示例說明**
通用元素選擇器， 匹配所有的元素。
. class
.info
類選擇器，匹配所有class屬性值中包含info的元素。
element
p標籤選擇器。匹配p標籤。
#id#info
id選擇器，匹配id屬性為#info的元素。
選擇器示例
示例說明
element + element
div + p
緊鄰兄弟選擇器。選擇緊接著div元素的第乙個p元素
element > element
div > p
子元素選擇器。選擇所有父級元素為div元素的p元素
element，element
div ， p
多元素選擇器。 選擇所有的div元素和p元素
element~ element
div~p
一般兄弟選擇器。將會匹配同一父元素下，div 元素後的所有 p 元素。
element element
div p（中間有乙個空格）
後代選擇器。將會將匹配 div 元素內所有的 p 元素。
偽類較多，只列舉一些比較常用的
選擇器示例
示例說明
:hover
div:hover
匹配滑鼠懸停在上方的div元素
:link
a:link
匹配所有未被訪問的鏈結
:visited
a:visited
匹配所有已被訪問的鏈結
:active
a:active
匹配所有活動鏈結
:focus
input:focus
匹配獲得焦點的input元素
:disabled
input:disabled
匹配被禁用的input元素
:enabled
input:enabled
匹配處於啟用狀態的input元素
:first-child
p:first-child
匹配其父元素的第乙個子元素p。
:last-child
p:last-child
匹配父元素的最後乙個子元素p
:only-child
p:only-child
匹配父元素中唯一乙個子元素p
:first-of-type
p:first-of-type
匹配其父元素中第乙個出現的p元素
:last-of-type
p:last-of-type
匹配其父元素中最後乙個出現的p元素
:only-of-type
p:only-of-type
匹配其父元素中沒有與其相同型別的子元素
這個 css 偽類首先找到所有當前元素的兄弟元素，然後按照位置先後順序從1開始排序，依此類推。示例：
注意：a 和 b 都必須為整數，並且元素的第乙個子元素的下標為 1。an 必須寫在 b 的前面，不能寫成 b+an 的形式。
這個 css 偽類匹配文件樹中在其之後具有an+b-1個兄弟節點的元素，其中n為正值或零值。它基本上和:nth-child一樣，只是它從結尾處反序計數，而不是從開頭處。其用法參考:nth-child
與:nth-child用法一樣，但是只匹配使用同種標籤的元素。例如:
html
這段不參與計數。
這是第一段。
這是第二段。
這段不參與計數。
這是第三段。
這是第四段。
/* 奇數段 */
p:nth-of-type(2n+1)
/* 偶數段 */
p:nth-of-type(2n)
/* 第一段 */
p:nth-of-type(1)
它基本上和:nth-of-type一樣，只是它從結尾處反序計數，而不是從開頭處。
就像pseudo classes (偽類)一樣， 偽元素也可以新增到選擇器，但不是描述特殊狀態，它們允許您為元素的某些部分設定樣式。
所有的偽元素:
::after用來建立乙個偽元素，作為已選中元素的最後乙個子元素。通常會配合content屬性來為該元素新增裝飾內容。這個虛擬元素預設是行內元素。例如：
html
這是第一段文字
這是第二段文字
這是第三段文字
.first-text::after
.third-text::after
::before建立乙個偽元素，其將成為匹配選中的元素的第乙個子元素。常通過content屬性來為乙個元素新增修飾性的內容。此元素預設為行內元素。
html
這是第一段文字
這是第二段文字
這是第三段文字
.first-text::before
.third-text::before
::first-letter會選中塊級元素第一行的第乙個字母，並且文字所處的行之前沒有其他內容（如和內聯的**） 。
::first-line在塊級元素的第一行應用樣式。第一行的長度取決於很多因素，包括元素寬度，文件寬度和文字的文字大小。
::selection應用於文件中被使用者高亮的部分（比如使用滑鼠或其他選擇裝置選中的部分）。例如：
html
這是一段文字這是一段文字這是一段文字這是一段文字
這是第二段文字
這是第三段文字
.first-text::selection
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
前端知識 css選擇器總結
div class id 問 id與標籤選擇器區別?答 id只能使用一次。缺點 效能問題 為元素新增特殊效果 鏈結偽類 a link a visted a hover a actived 結構偽類 first child last child nth child n nth last child n...
CSS總結 CSS選擇器
css3選擇器最新部分，有人也稱這種選擇器為css3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...