Help:CSS/選擇器
出自滚动的天空Wiki
< Help:CSS
選擇器（selector）是CSS中一個重要的概念。它指示樣式規則應該應用於文檔中的哪些元素，同時它也可以用於jQuery構造器和document.querySelector()對元素的搜索。
基本[編輯原始碼]
選擇器的最簡單位有4種：
tagName。以字母開頭的會被視為標籤名字，如body表示選取文檔<body>元素。.className。以小數點開頭的會被視為類名，如.mw-parser-output表示選取帶有mw-parser-output類的所有元素。#id。以井號開頭的會被視為ID，如#mw-content-text表示選取id為mw-content-text的某個元素。一般地，在DOM中，一個存在的ID應當是某個元素獨有的，不同元素有同一個ID是非法的。*。一個單獨的星號，被視為通用選擇器，可以選擇所有元素。
一般地，前三種可以通過以與的關係、以標籤名、類名、id選擇器的先後順序進行組合。例如，div.navbox#nav-level表示選擇id為nav-level、具有navbox類的div元素。不過，id選擇器一般會單獨出現，並且id和標籤只能組合一個，但類名可以組合多個，如.navbox.navbox-list，因為一個元素不會有多個標籤名字或id。另外，可以用逗號連接多個選擇器，以或的關係進行分組，如ol, ul表示選取任意的有序和無序列表。
組合選擇器[編輯原始碼]
簡單選擇器之間可以使用組合器進行連接，以表達複雜的關係。組合器有下面4種：
.navbox .navbox-list表示選取任意導航框中任意的列表元素；.navbox .navbox .navbox-list選取任意二級以上導航框中任意的列表元素。>，子組合器（一個大於號）。表示選取的元素是前面的選擇器表示的元素的子元素。例如，.mw-parser-output > p表示選取任意帶有mw-parser-output的元素的直接後代。+，相鄰兄弟組合器（一個加號）。表示選取的元素直接緊挨在前面選擇器表示的元素之後。例如，.navbox + .navbox表示選取任意一個前面緊挨有導航框的導航框元素。~，通用兄弟選擇器（一個波浪線）。表示選取的元素在前面選擇器表示的元素之後（不一定緊挨）。例如，.start ~ li表示選取帶有start類的元素之後的所有同級列表元素。
一般地，書寫組合器時，除後代組合器本身就是空格，其他選擇器前後應加上空格以便閱讀。
偽類[編輯原始碼]
主條目：Help:CSS/偽類
偽類表示元素的特定狀態，使用單冒號:表示，其名稱不區分大小寫。如li:first-child表示選取作為其父元素的第一個子元素的列表元素。有的偽類具有參數，有的則沒有。
偽類一般書寫在簡單選擇器的最後，但也有例外，比如:is()等選擇器的書寫位置取決於其參數的類型。
偽元素[編輯原始碼]
主條目：Help:CSS/偽元素
偽元素用於設置元素指定部分的樣式，使用雙冒號::表示。如li::marker表示每個列表之前的標記。
使用[編輯原始碼]
CSS[編輯原始碼]
CSS樣式規則定義需要用到選擇器，以確定規則應用到的元素。
選擇器 {
屬性1: 值1;
屬性2: 值2;
...
}
jQuery[編輯原始碼]
主條目：Help:JQuery
jQuery可以用選擇器構造一個含有特定元素jQuery對象。例如，$("#mw-content-text")表示構造一個jQuery對象，其中的元素帶有idmw-content-text
