要想将CSS样式应用于特定的HTML元素, 首先需要找到该目标元素.
在CSS中, 执行这一任务的样式规则部分被称为选择器.
元素选择器元素选择器,又称标签选择器, 是指用HTML标签名作为选择器, 为页面某一类标签指定统一的CSS样式标签名 {
属性1:属性值1;
属性2:属性值2;
}
/* 元素选择器 */
div {
width:400px;
height:200px;
background-color:red;
}
ID选择器id选择器使用"#"进行标识,后面紧跟id名.#id{
属性1:属性值1;
属性2:属性值2;
}
/* id选择器 */
#helloha {
width:400px;
height:200px;
background-color:aqua;
}
类选择器类选择器使用"."(英文点号)进行标识,后面紧跟类名.类名{
属性1:属性值1;
属性2:属性值2;
}
/* 类选择器 */
.ha {
width:400px;
height:200px;
background-color:lavender;
}
派生选择器派生选择器允许根据文档的上下文关系来确定某个标签的样式.
通过合理地使用派生选择器, 我们可以使HTML代码变得更加整洁
需求: 使列表中的li标签下的strong元素变化斜体字,而不是通常的粗体字,此时就可以定义一个派生选择器
/* 派生选择器 */
ul li strong {
width:100px;
height:100px;
background-color:yellow;
font-style:italic;
}
我有strong标签,我会倾斜吗?
- 我即将倾斜了!
- 我应该不能倾斜