CSS-Day4

Coisini-蜻蜓

已于 2023-07-14 21:10:40 修改

阅读量66

点赞数

文章标签： css3 前端 css

于 2023-07-14 21:09:42 首次发布

本文链接：https://blog.csdn.net/m0_54109180/article/details/131722854

版权

文章介绍了使用Emmet语法快速生成HTML结构，并详细讲解了CSS中的复合选择器，包括后代选择器、子选择器、并集选择器以及链接伪类选择器（未点击、已访问、悬停、活动状态）和focus伪类在表单元素上的应用。此外，还阐述了CSS中元素的显示模式，如块元素、行内元素和行内块元素的特点。

摘要由CSDN通过智能技术生成

一.emment语法生成HTML结构

二.复合选择器

2.1后代选择器

<!-- 后代选择器 -->
    <ul>
        <li>xixixii</li>
    </ul>
    <ol>
        <li>hahha</li>
    </ol>


ol li {
            color: #db9090;
        }

2.2子选择器

2.3并集选择器

2.4链接伪类选择器

选择出没有被点击的链接

<style>
        a:link {
            color: #d0d01e;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!-- 链接伪类选择器 -->
    <a href="#">小猪佩奇</a>
</body>

选择出被访问过的链接

a:visited {
            color: #e01b1b;
        }

选择出鼠标指针位于其上的链接

a:hover {
            color: #2e14bd;
        }

选择出按下没有松开的链接

 a:active {
            color: #b9f612;
        }

2.6 ：focus伪类选择器

选择获得光标的标签，主要针对表单元素

<style>
        input:focus {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>