CSS 选择器

通配符

例如: *{}。所有

选择器分组

例如：h1,h2{}

元素选择器

最常见的选择器就是元素选择器，文档的元素就是最基本的选择器。

例如：h1{}、a{}

类选择器

  1. 类选择器允许以一种独立于文档元素的方式来指定样式。

    例如: .class{}

  2. 结合元素选择器

    例如: a.class{}

  3. 多类选择器

    例如: .class.class{}。class="c_n1 c_n2";

ID 选择器

  1. ID 选择器

    ID 选择器类似类选择器

    例如: #ID{}

  2. 类选择器

    ID 只能在文档中使用一次，而类可以多次使用

    ID 选择器不能结合使用

    当使用 js 时，需要用到 id

属性选择器

  1. 简单属性选择:

    例如: [title]{}

  2. 根据具体属性值选择

    处理选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素

    例如: a[href="http://www.baidu.com"]{}

  3. 属性和属性值必须完全匹配
  4. 根据部分属性值选择

    例如: [title~="title"]{}。title 中含有 title 字符的都可匹配到。~表示模糊的意思。

<head>
    <style>
        [title]{color:blue;}
        [title=te]{color:red;}
    </style>
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值选择器</p>
</body>

后代、子元素、兄弟选择器

  1. 后代选择器:

    后代选择器可以选择作为某元素后代的元素

    例如: p strong i{}

  2. 子元素选择器

    于后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,只能选择一层。

    例如: h1>strong{}

  3. 相邻兄弟选择器

    可选择紧接在另一个元素后的元素，且二者有相同父元素

    例如: li+li{}