CSS的选择器

1.1 CSS的选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，本小节将对CSS基础选择器进行详细地讲解，具体如下：

1.1.1 元素选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：

[AppleScript] 纯文本查看 复制代码

?

1	标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，所有的HTML标记名都可以作为标记选择器，例如body、h1、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效。

例如：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7 8 9

h1{   color: #F00;   font-size: 50px;   }   <h1>传智播客</h1>

标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。

1.1.2 ID选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

[AppleScript] 纯文本查看 复制代码

?

1	#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

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

        例如：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7

#demo1{   color:#0f0;   }   <h1 id="demo1">黑马训练营</h1>

 “标签选择器”和“id选择器”共同作用的效果

1.1.3 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

[AppleScript] 纯文本查看 复制代码

?

1	.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

        例如：

[AppleScript] 纯文本查看 复制代码

?

1 2 3 4 5 6 7

.myClass{   font-size: 25px;   }   <h1 class="myClass">Java培训</h1>

 “标签选择器”和“类选择器”共同作用的效果

        类选择器的高级用法：给指定的标签设置class样式

[AppleScript] 纯文本查看 复制代码

?

1	标签.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

1.1.4 扩展：包含选择器

包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。

[AppleScript] 纯文本查看 复制代码

?

1	父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该选择器，是对“元素选择器”的扩展，对一个标签内部所有后代标签进行过滤。

[AppleScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11

<style>   #d1 div{   color: red;   }        </style>