CSS-选择器

最新推荐文章于 2023-03-06 14:29:46 发布

Void_CM

最新推荐文章于 2023-03-06 14:29:46 发布

阅读量80

点赞数

分类专栏： Html+CSS+js 文章标签： css html

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113591198

版权

Html+CSS+js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Direct</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: rgb(59, 58, 58);
            color: white;
            font-family:  Helvetica Neue,Arial, sans-serif;
        }
        ul {
            /* 去列表圆点 */
            list-style: none;
            padding: 0;
        }
        li {
            display: inline-block;
            margin-left: 20px;
            border-radius: 3px;
            padding: 2px;
            background-color: gray;
        }
         /* 伪类的使用 pseudo */
        li:hover{
            background-color: indianred;
        }
        li:active{
            text-decoration: underline;
        }
        li:first-child {
            margin-left: 0;
            background-color: red;
        }
        a{
            /* 去下划线 */
            text-decoration: none;
                    }
        a:hover{
            text-decoration: underline;
        }
        .feature-box {
            display: flex;
            text-align: center;
        }
        .feature-box div{
            width: 100%;
            margin: 1px;
        }
        .feature-box.sales div {
            background-color: gray;
           
        }
        .feature-box.closeouts div {
            background-color: red;
        }
        #seldom {
            font-size: 150%;
        }

    </style>
</head>
<body>
    <header>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </header>
    <!-- 空格表示两个类名，便于做更进一步的细分 -->
    <section class="feature-box sales">
        <div>section a</div>
        <div>section b</div>
        <div>section c</div>
    </section>
    <!-- id是唯一的，除非非用不可，否则少用 -->
    <section id="seldom" class="feature-box closeouts">
        <div>section d</div>
        <div>section e</div>
    </section>
</body>
</html>