一、什么是选择器
Css控制html样式,要css控制哪个元素的样式,这个元素就要被作为选择器。例如要改变标题一的大小h1{font-size:12px;},改变段落文本颜色 p{color:Red},此时h1、p为选择器。
二、选择器种类
- 标签选择器。
实例
选择并设置所有 <p> 元素的样式:
*注意:只针对HTML中标签使用。
由于标签选择器控制的是所有此标签的样式,范围较大,使用起来不够灵活。
- 类别选择器。
语法:.style引用 class=“style”。
规定某一类样式的时候,使用类别选择器。
实例
选择并设置 class="intro" 的元素的样式:
例1:大小30px,颜色蓝色字体。
例2:
一个html元素可以引用多个类,
class=aa bb 用空格隔开
*注意:选择器必须以字母或下划线开头,命名时要按照其作用命名。区分大小写。
- ID选择器。
语法:#top 引用 id=“top”
*注:ID与类别区别:id不能同时在两个标记中使用,有唯一性。而且id不仅仅适用于CSS代码,同样适用在js中,会造成语法混乱。对于页面结构的定义使用id,对于文本等样式的定义多次重复使用的使用class。
实例
为 id="firstname" 的元素设置样式:
- 群组选择器,h1,p{ font-size:14px}
群组选择器用于同时选取多个元素。如需为不同的元素设置相同的样式,请用逗号来分隔每个元素。
实例
选择并设置所有 <h1> 样式和所有 <p> 元素的样式:
h1,p{ background-color:yellow;}
例3:
文档中所有的H1\h2\h3均为红色、30像素字体、背景色为黄色。
如果部分相同而部分不同,不同部分需要重新定义。
例4: