1、元素选择器

　　元素选择器是最简单的选择器，其语法如下：

　　E{.....}/*E代表有效的HTML元素名，后面内容中的E都是代表元素名*/。

　　在定义css样式时，通常会使用通配符“*”来匹配HTML文档中的任意元素，不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。

2、属性选择器

　　从广义角度来看，元素选择器其实是属性选择器的特例。属性选择器有以下几种语法格式。

  • E{...}：指定该css样式对所有E元素起作用。
  • E[attr]{...}：指定该css样式对具有attr属性的E元素起作用。
  • E[attr=value]{...}：指定该css样式对所有包含attr属性且该属性值为value的E元素起作用。
  • E[attr ~=value]{...}：指定该css样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
  • E[attr |=value]{...}：指定该css样式对所有包含attr属性，且attr属性的值为以连字符分隔得系列值，其中第一个值为value的Tag元素起作用。
  • E[attr^="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值以value开头的字符串的E元素起作用。
  • E[attr$="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值以value结尾的字符串的E元素起作用。
  • E[attr*="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值为包含value的字符串的E元素起作用。

　　以上几个选择器匹配的规则越严格优先级越高，而且也并没有得到所有浏览器的广泛支持。使用示例如下：

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 属性选择器 </title>
    <style type="text/css">
    /* 对所有div元素都起作用的CSS样式 */
    div {
        width:300px;
        height:30px;
        background-color:#eee;
        border:1px solid black;
        padding:10px;
    }
    /* 对有id属性的div元素起作用的CSS样式 */
    div[id] {
        background-color:#aaa;
    }
    /* 对有id属性值包含xx的div元素起作用的CSS样式 */
    div[id*=xx] {
        background-color:#999;
    }
    /* 对有id属性值以xx开头的div元素起作用的CSS样式 */
    div[id^=xx] {
        background-color:#555;
        color:#fff;
    }
    /* 对有id属性值等于xx的div元素起作用的CSS样式 */
    div[id=xx] {
        background-color:#111;
        color:#fff;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx子字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

 

 

 

其效果如下：

3、ID选择器

　　ID选择器指定css样式对具有指定id属性的HTML元素起作用，返回值为单个元素。语法格式为：#idValue{...}。

4、class选择器

　　语法格式为：[E].classValue{......}

5、包含选择器

　　语法格式为：Selector1 Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/

6、子选择器（>）

　　子选择器用于指定目标必须是某个选择器对应的元素的子元素。语法格式为：Selector1>Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/

包含选择器与子选择器有点相似，存在的区别为：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是“孙子元素”也可以，但对于子选择器来说，要求是外部选择器对应的元素的直接子元素，即“儿子元素”。

7、兄弟选择器（~，也可以叫同辈元素选择器）

　　兄弟选择器是CSS3.0新增的一个选择器。语法格式为：Selector1~Selector2{......}。该选择器匹配与Selector1对应的元素后面、能匹配Selector2 的兄弟节点。

8、相邻元素选择器（+）

　　语法格式为：Selector1+Selector2{......}。选择紧邻Selector1元素之后的Selector2元素

9、选择器组合

　　语法格式为：Selector1,Selector2,Selector3{......}/*其中Selector1 、Selector2和Selector3都是有效的选择器*/

10、伪元素选择器

　　伪元素选择器并不是针对真正的元素使用的选择器，它只能对CSS中已有的伪元素起作用。CSS提供的伪元素选择器有以下几个。

  • first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。（对块元素起作用）
  • first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。（对块元素起作用，只对第一行起作用，与换行方式无关）
  • before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
  • after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾部插入内容。

 

选择器的优先级　　

伪类和类选择器的优先级是一样的。

一般来说，选择器的优先级（从上往下依次降低）是：

 

      1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
      2. 作为style属性写在元素内的样式
      3. id选择器
      4. 类选择器
      5. 标签选择器（元素选择器）
      6. 通配符选择器