HTML基础-css选择器

要想将CSS样式应用于特定的HTML元素, 首先需要找到该目标元素.

在CSS中, 执行这一任务的样式规则部分被称为选择器.

元素选择器

元素选择器,又称标签选择器, 是指用HTML标签名作为选择器, 为页面某一类标签指定统一的CSS样式

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

<style>

/* 元素选择器 */

div {
width:400px;
height:200px;
background-color:red;
}
</style>

<div> Hello World </div>

ID选择器

id选择器使用"#"进行标识,后面紧跟id名.

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

<script>
    /* id选择器 */
    #helloha {
        width:400px;
        height:200px;
        background-color:aqua;
    }
</script>

<div id="helloha"> Hello HelloHa </div>

类选择器

类选择器使用"."(英文点号)进行标识,后面紧跟类名

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

<script>
/* 类选择器 */
.ha {
    width:400px;
    height:200px;
    background-color:lavender;
}
</script>

<div class="ha"> HaHaHa </div>

派生选择器

派生选择器允许根据文档的上下文关系来确定某个标签的样式.
通过合理地使用派生选择器, 我们可以使HTML代码变得更加整洁

需求: 使列表中的li标签下的strong元素变化斜体字,而不是通常的粗体字,此时就可以定义一个派生选择器

<script>
/* 派生选择器 */
ul li strong {
    width:100px;
    height:100px;
    background-color:yellow;
    font-style:italic;
}
</script>
<p>
    <stong>我有strong标签,我会倾斜吗?</stong>
</p>
<ul>
    <li><strong>我即将倾斜了!</strong></li>
    <li>我应该不能倾斜</li>
</ul>