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