1. 空格 —— “后代选择器”

例如下面这个例子，表示div元素里面所有的p元素

div p {
    ...
}

2. > —— “子选择器”

例如下面这个例子，表示div元素里面所有的子代（不含孙代及以后）p元素

div>p {
    ...
}

3. ~ —— “兄弟元素选择器”

例如下面这个例子，表示.cls元素往后的同级的p元素

.cls~p {
    ...
}

4. + —— "相邻兄弟选择器"

例如下面这个例子，表示.cls元素往后的一个同级元素(并且要求这个元素是p元素)

.cls~p {
    ...
}

5. || —— “列选择器” （浏览器还没实现）

例如下面这个例子，表示.aaa列的所有td元素

<style>
.aaa || td {
   background: red;
}
</style>
<table width="100%" border="1">
  <col class="aaa" align="left" />
  <col align="left" />
  <col align="right" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first html</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first css</td>
    <td>$47</td>
  </tr>
</table>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/2103