前端开发基础之CSS选择器——复合选择器（补充两个）-CFANZ编程社区

前端开发基础之CSS选择器——复合选择器（补充两个）

weednoah 2022-04-13 阅读 67

emment语法选择器
具体内容语法和解释均在以下代码中：

<body>
    <!-- 类选择器 语法：输入.111red+tab键-->
    <div class="111red"></div>
    <!-- id选择器 语法：输入#222id+tab键 -->
    <div id="222id"></div>
    <!-- 交集选择器 语法：标签名（如div/p标签）类或id选择器（.111red#222id） + tab键 -->
    <p class="111" id="222id"></p>
    <div class="111red" id="222id"></div>
    <!-- 子代选择器 语法：标签>另一个标签 -->
    <ul>
        <li></li>
    </ul>
    <!-- 子代选择器 语法.father#son + tab键 -->
    <div class="father">
        <div id="son"></div>
    </div>
    <!-- 生成内部文本 语法：标签+{内容} + tab键 注：同时也可以结合上诉内容一起使用-->
    <div>写上内容</div>
    <div class="father">
        <son>这是内容</son>
    </div>
    <!-- 创建多个标签 语法：标签>标签*n + tab键 -->
    <ul>
        <li>内容三个</li>
        <li>内容三个</li>
        <li>内容三个</li>
    </ul>
    <!-- 语法：div>.red*3{www} -->
    <div>
        <div class="red">www</div>
        <div class="red">www</div>
    </div>
</body>

hover伪类选择器
可以在任意选择器中使用，本文示例在a标签下使用。
作用：选中鼠标悬停在元素上的状态（鼠标不放在字上时是一种状态，放在字上时是另一种状态，注意这里不点击），设置样式。
语法：先写上一个选择器用与找到相对应的标签再写上:hover {样式内容}。
注意：里面内容需要在style标签下写!!!
具体代码如下：

<style>
    a:hover {
        color: orange;
        text-decoration: underline;
    }
</style>

<body>
    <a href="#">hahahahaha</a>
</body>

鼠标放上去前的结果
在这里插入图片描述
鼠标放上去后的结果

小编刚开始写，如有错误在评论区及时留言更正哦！
欢迎大家留言！！！

0 条评论