CSS 学习笔记之CSS Selector

body {
    /*对 body 元素定义样式*/
}

body,div {
    /*同时选择多种标签元素*/
}

<div id="nav">
    
</div>

<style>
    #nav {
        /*定义 ID 为 nav 的元素的样式*/
    }
</style>

<div class="nav">
    
</div>

<style>
    .nav {
        /*定义 class 为 nav 的元素的样式*/
    }
</style>

<div class="nav">
    <div class="nav-tools">
        
    </div>
</div>

<div class="nav">
    <div>
        <div class="nav-tools">
        
        </div>
    </div>
</div>

<style>
    .nav .nav-tools {
        /*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
    }
</style>

<div class="nav">
    <div class="nav-tools">
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

<style>
    a:link {
        text-decoration: none;
        color: blue;
    }
</style>

<style>
    a:visited {
        text-decoration: none;
        color: red;
    }
</style>

<style>
    a:active {
        text-decoration: none;
        color: green;
    }
</style>

<style>
    a:hover {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

<style>
    input:focus {
        text-decoration: none;
        background-color: #F4F4F4;
    }
</style>

<div class="doc">
    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-line {
        color: red;
    }
</style>

<style>
    .doc {
        width: 360px;
    }
    .doc>p::first-letter {
        font-size: 2em;
        color: red;
    }
</style>