CSS选择器和三大特性

选择器分类

选择器分为基础选择器 和 复合选择器两大类

基础选择器

• 基础选择器是由单个选择器组成的

• 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

1.1 标签选择器（元素选择器）

是以HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式

1.  
   标签名称{
2.  
   属性名1:属性值1;
3.  
   属性名2:属性值2;
4.  
   属性名3:属性值3;
5.  
   ……
6.  
   }

• 作用：将某一类标签全部选择出来

• 优点：能快速为页面中的同类型标签设置样式

• 缺点：不能设计差异化样式，只能选择全部的当前标签

1.2 类选择器

如果要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）

语法：

1.  
   .类名 {
2.  
   属性名1:属性值1;
3.  
   属性名2:属性值2;
4.  
   属性名3:属性值3;
5.  
   ……
6.  
   }

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示

注意：

1. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名

2. 可以理解为给标签取了一个名字

3. 长名称或词组可以使用中横线来为选择器命名

4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示

5. 命名要有意义，尽量见名知意

1.3 通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

语法：

*{ 属性1：属性值1；属性2：属性值2；}

注：但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

1.4 id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

语法：

#id名{ 属性1：属性值1；属性2：属性值2；}

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

注：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

1.5 属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

语法：

[标签名称] { 属性1：属性值1；属性2：属性值2；}

注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS 选择器参考手册：

使用属性选择器，可以只指定元素的某个属性，还可以同时指定元素的某个属性和其对应的属性值。

复合选择器

1.1 简介

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器 之上,对基本选择器进行组合形成的。

• 复合选择器可以更准确、更高效的选择目标元素(标签)

• 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

• 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

1.2 后代选择器（* *）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层 标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

语法：

元素1 元素2 （ 样式声明 ）

上述语法表示选择元素1里面的所有元素2（后代）

注意：元素1和元素2 中间用空格隔开；元素1是父级，元素2是子级，最终选择的是元素2；

元素2可以是儿子辈，也可以是孙子辈，只要是元素1的后代即可；元素1和元素2 可以是任意基础选择 器。

1.3 子元素选择器（*>*）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单来说就是亲儿子

语法：

元素1>元素2 （ 样式声明 ）

上述语法表示选择元素1里面所有直接后代（子元素）元素2

注意：

• 元素1和元素2 中间用大于号隔开

• 元素1 是父级，元素2是子级，最终选择的是元素2

• 元素2必须是亲儿子，孙子与重孙之类的都不是

1.4 并集选择器 （*，*）

并集选择器可以选择多组标签，同时为其定义相同的样式。

并集选择器是各选择器通过英文（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 （ 样式声明 ）

注意：

• 元素1与元素2中间用逗号隔开

• 逗号可以理解为和的意思

• 并集选择器通常用于集体声明

1.5 链接伪类选择器 

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第n个元素

伪类选择器书写最大的特点是用冒号（：）表示，:hover、:visited、:link、 :active

因为伪类选择器很多，比如有链接伪类、结构伪类等

1.  
   a:link /* 选择所有未被访问的链接 */
2.  
   a:visited /* 选择所有已被访问的链接 */
3.  
   a:hover /* 鼠标指针位于其上的链接 */
4.  
   a:active /* 选择活动的链接（鼠标按下未弹起） */

1.6 focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

所谓交单就是光标，一般情况类元素才能获取，所以focus只针对表单元素

1.  
   input:focus {
2.  
   background-color:yellow;
3.  
   }

伪类选择器总结：

CSS的三大特性

CSS三大特性之层叠性

相同选择器给设置相同的样式，此时样式就会覆盖（层叠）另一个冲突样式。层叠样式主要解决样式冲 突。

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

• 样式不冲突，不会层叠

CSS三大特性之继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业。

• 使用继承可以简化代码，将CSS样式的复杂性减低

• 子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）

行高的继承

1.  
   body{
2.  
   /*font : 字号/行高 字体样式*/
3.  
   font:12px/1.5 'Microsoft YaHei';
4.  
   }
5.  
   div{
6.  
   font-size:14px;
7.  
   }

子元素继承了父元素body的行高1.5

这个1.5 就是当前元素文字大小 font-size的1.5倍

CSS三大特性之优先级

当同一个元素指定多个选择器，就会优先级的产生

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

选择器权重

优先级注意的问题

1. 权重是有四个数字组成，但是不会有进位

2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值

4. 简单记忆（参考简单权重值）

5. 继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

这篇好文章是转载于：学新通技术网