关于html: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>