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>