CSS Selectors
้ธๆๅจๅฏไปฅๅฎ็พฉๆ็ต CSS ๆจฃๅผ่ฆๅฅ็จๅฐๅชไบๅ ็ด ไธใ
ๅบๆฌ้ธๆๅจ
- ้็จ้ธๆๅจ๏ผUniversal selector๏ผ
-
็จไปฅ้ธๆๆๆๅ ็ด ใ๏ผๅฏ้ธ๏ผๅฏไปฅๅฐๅ ถ้ๅถ็บ็นๅฎ็ๅ็จฑ็ฉบ้ๆๆๆๅ็จฑ็ฉบ้ใ ่ชๆณ:
* ns|* *|*็ฏไพ:*ๅฅ็จๆๆชไธญๆๆๅ ็ด ใ - ๆจ็ฑค้ธๆๅจ๏ผType selector๏ผ
-
็จไปฅ้ธๆๆๆ็ฌฆๅๆๅฎๆจ็ฑค็ๅ ็ด ใ ่ชๆณ:
elementname็ฏไพ:inputๅฏ้ธๅบไปปไธ <input> ๅ ็ด ใ - ้กๅฅ้ธๆๅจ๏ผClass selector๏ผ
-
็จไปฅ้ธๆๆๆ็ฌฆๅๆๅฎ
classๅฑฌๆงๅผ็ๅ ็ด ใ ่ชๆณ:.classname็ฏไพ:.indexๅฏ้ธๅบไปปไธๅซๆindex็ class ๅฑฌๆงๅผไนๅ ็ด ใ - ID ้ธๆๅจ๏ผID selector๏ผ
-
็จไปฅ้ธๆๆๅฎ
idๅฑฌๆงๅผ็ๅ ็ด ใ๏ผไธๅๆไปถไธญ๏ผๆฏๅ ID ๅฑฌๆง้ฝๆฏๅฏไธ็ใ๏ผ ่ชๆณ:#idname็ฏไพ:#tocๆๆฏๅฐๅซๆ ID ๆฏ toc ็ๅ ็ด (ๅฏไปฅๅฎ็พฉๆid="toc"ๆๅ ถไป้กไผผ็ๅฎ็พฉ)ใ - ๅฑฌๆง้ธๆๅจ๏ผAttribute selector๏ผ
-
็จไปฅ้ธๆๆๆ็ฌฆๅๆๅฎๅฑฌๆง็ๅ ็ด ใ ่ชๆณ:
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]็ฏไพ:[autoplay]ๅฐๆๅฅ็จๅซๆautoplayๅฑฌๆง็ๅ ็ด ใ(ไธ่ซ้ๅๅฑฌๆง็ๅผๆฏไป้บผ)ใ
ๅ็ต้ธๆๅจ
- ้ธๆๅจๅ่กจ๏ผSelector list๏ผ
-
,็จไปฅๅฐไธๅ็้ธๆๅจ็ตๅ่ตทไพ็ไธ็จฎๆนๆณใ ่ชๆณ:A, B็ฏไพ:div, spanๅฐๅๆ้ธๆ<div>ๅ<span>ๅ ็ด ใ
็ตๅ้ธๆๅจ
- ๅพไปฃ้ธๆๅจ๏ผDescendant combinator๏ผ
-
" " (็ฉบๆ ผ) ็จไปฅ้ธๆๆๅๅ ็ด ๅพไปฃ็ๅ ็ด ใ ่ชๆณ:
A B็ฏไพ:div spanๅฅ็จๆๆ<div>ๅ ็ด ๅ ง้จ็ๆๆ<span>ๅ ็ด ใ - ๅญไปฃ้ธๆๅจ๏ผChild combinator๏ผ
-
>็จไปฅ้ธๆๆๅๅ ็ด ๅพไปฃ็ๅ ็ด ใ ่ชๆณ:A > B๏ผB ๅ ็ด ไธๅฏๅจ A ๅ ็ด ็ๅ ถไปๅ ็ด ่ฃก๏ผ ็ฏไพ:ul > liๅฅ็จๆๆ<li>ๅ ็ด ๅ ง้จ็<ul>ๅญๅ ็ด ใ - ไธ่ฌๅ ๅผ้ธๆๅจ๏ผGeneral sibling combinator๏ผ
-
~combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. ่ชๆณ:A ~ B็ฏไพ:p ~ spanwill match all<span>elements that follow a<p>, immediately or not. - ็ธ้ฐๅ ๅผ้ธๆๅจ๏ผAdjacent sibling combinator๏ผ
-
+้ธๆ็ทๆฅๅจๅพ็ๅ ็ด ๏ผไธฆๅ ฑไบซ็ถๅ ็ด ใ ่ชๆณ:A + B็ฏไพ:h2 + pๅฅ็จๆๆ ็ทๆฅๅจ<h2>ๅ ็ด ๅพ็ <p> ๅ ็ด ๏ผไธฆๆๆ<h2>็็ถๅ ็ด ใ - Column combinator ๅฏฆ้ฉๆง่ณช
-
The
||combinator selects nodes which belong to a column. ่ชๆณ:A || B็ฏไพ:col || tdwill match all<td>elements that belong to the scope of the<col>.
ๅฝ้ธๆๅจ
- Pseudo classes
-
The
:pseudo allow the selection of elements based on state information that is not contained in the document tree. ็ฏไพ:a:visitedwill match all<a>elements that have been visited by the user. - Pseudo elements
-
The
::pseudo represent entities that are not included in HTML. ็ฏไพ:p::first-linewill match the first line of all<p>elements.
่ฆ็ฏ
| Specification |
|---|
| Selectors Level 4 |
See the pseudo-class and pseudo-element specification tables for details on those.