css 选择器符号

时间 2019-12-08

标签 css 选择器符号栏目 CSS 繁體版

原文原文链接

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

例以下面这个例子，表示div元素里面全部的p元素spa

div p {
    ...
}

2. > —— “子选择器”code

例以下面这个例子，表示div元素里面全部的子代（不含孙代及之后）p元素blog

div>p {
    ...
}

3. ~ —— “后继选择器”it

例以下面这个例子，表示.cls元素日后的同级的p元素table

.cls~p {
    ...
}

4. + —— "直接后继选择器"class

例以下面这个例子，表示.cls元素日后的一个同级元素(而且要求这个元素是p元素)tab

.cls+p {
    ...
}

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

例以下面这个例子，表示.aaa列的全部td元素co

<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>