WEB_02_CSS_第四讲_选择器

1、选择器：要想将css样式应用于特定的HTML元素，首先需要找到该目标元素。在css中，执行这一任务的样式规则部分被称为选择器。

2、CSS几种选择器：

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

标记名{属性1：属性值属性2：属性值2；属性3：属性值3；}

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

例如：

<h1>指南者</h1>

h1{

color:#F00;

font-size:50px;

}

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

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

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

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

例如：

<h1 id="demo">指南者</h1>

#demo{

color:#0F0;

}

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

类名{属性1：属性值属性2：属性值2；属性3：属性值3；}

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

例如：

<h1 class="demo">指南者</h1>

.demo{

font-size:25px;

}

注意：类选择器的高级用法：给指定的标签设置class样式：标签·类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

（4）、属性选择器：属性选择器，在标签后面使用中括号标记，其基本语法格式如下：

标签名标签属性：['标签属性值' ] {属性1：属性值1；属性2：属性值2；属性3：属性值3；该选择器，是对“元素选择器”的扩展，对一组标签进一步过滤。

例如：

<style>

input[type="text"]{

background-color:red;

}

input[type="password"]{

background-color:black;

}

</style>

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

父标签后代标签{属性1：属性值属性2：属性值2；属性3：属性值3；} 

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

例如：

<style>

#demo div{

color:red;

}

</style>