关于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{
    属性 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>

元素选择器

ID 选择器

类选择器

派生选择器