元素选择器(Element Selectors): Css
1p { color: red; } /* 选择所有<p>元素 */ 2div { background-color: yellow; } /* 选择所有<div>元素 */
类选择器(Class Selectors): Css
1.example { font-size: 16px; } /* 选择class为"example"的所有元素 */
ID选择器(ID Selectors): Css
1#unique-id { width: 100%; } /* 选择id为"unique-id"的唯一元素 */
属性选择器(Attribute Selectors): Css
1a[target="_blank"] { color: green; } /* 选择所有target属性值为"_blank"的<a>链接 */
伪类选择器(Pseudo-classes): Css
1a:hover { text-decoration: underline; } /* 选择鼠标悬停状态下的<a>元素 */ 2li:nth-child(even) { background-color: lightgray; } /* 选择每个父元素下索引为偶数的<li>元素 */
组合选择器(Combinators):
后代选择器(Descendant Selector):
Css
1div p { color: blue; } /* 选择所有位于<div>内部的<p>元素 */
子选择器(Child Selector):
Css
1ul > li { list-style-type: none; } /* 选择<ul>直接子元素中的所有<li>元素 */
相邻兄弟选择器(Adjacent Sibling Selector):
Css
1h2 + p { margin-top: 0; } /* 选择紧随<h2>之后的第一个<p>元素 */
一般同胞选择器(General Sibling Selector):
Css
1h2 ~ p { font-weight: bold; } /* 选择所有跟在<h2>之后的同级<p>元素 */
伪元素选择器(Pseudo-elements): Css
复制
1p::first-letter { font-size: larger; } /* 选择每个<p>元素的第一个字母 */ 2a::before { content: " ["; } /* 在每个<a>元素内容之前插入文本 */