说实话，如果不是复习，我原来还有这么多没有记住

选择器的分组

Id选择器

  • HTML元素以id属性来设置id选择器,CSS 中 id 选择器以"#"来定义。
1
2
3
4
5
6
/* id="para1":  */
#para1
{
    text-align:center;
    color:red;
}

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

Class选择器

  • 在 CSS 中，类选择器以一个点"."号显示。
    1
    2
    3
    4
    5
    /* 所有拥有 center 类的 HTML 元素均为居中。 */
    .center {text-align:center;}

    /* 所有的 p 元素使用 class="center" 让该元素的文本居中 */
    p.center {text-align:center;}
    注意：同样，class属性不要以数字开头，数字开头的class在 Mozilla/Firefox 浏览器中不起作用。

标签选择器

  • 以 html 标签作为 css 修饰所用的选择器。
    1
    2
    3
    4
    5
    6
    <style>
    h3{
        color:red;
    }
    </style>
    <h3>chuyuxuan</h3>

包含选择器

  • 指定目标选择器必须处在某个选择器对应的元素内部，
    语法格式：
    A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

子选择器

  • 类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：
    A>B{...}（A、B为HTML元素/标签,A是类名，B是标签）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    以下div内的p标签匹配样式，div内的table内的p不匹配
    <style>
    div>p{
      color:red;
    }
    </style>
    <div>
      <p>red text</p><!--文字是红色的-->
      <table>
        <tr>
          <td>
            <p>no red text;</p><!--文字是非红色的-->
          </td>
        </tr>
      </table>
    </div>

兄弟选择器（brother selector，BS）

  • BS是CSS3.0新增的一个选择器，语法格式：
    A~B{...} （A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    div~p{
      color:red;
    }
    </style>
    <div>
      <p>no red text</p><!--文字是非红色的-->
      <div>no red text</div>
      <p>red text</p><!--文字是红色的-->
    </div>

相邻选择器

语法形式为：

1
2
3
4
5
A+B{
    声明1;
    声明;
    ...
}

实例:

1
2
3
4
5
6
7
8
9
10
11
12
<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>