（10）HTML&&CSS笔记（伪元素，高级选择器）

最新推荐文章于 2024-04-28 20:02:49 发布

沭瑾

最新推荐文章于 2024-04-28 20:02:49 发布

阅读量93

点赞数 1

分类专栏： HTML&&CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/xiaoma_666/article/details/97310335

版权

HTML&&CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、选择器
群组选择器：同时匹配共同的样式，元素与元素之间用逗号隔开；
后代选择器：同时匹配A元素的后代B元素，两元素之间用空格隔开；
子元素选择器：匹配A元素的子代B元素，两元素之间用大于隔开；
毗邻选择器：B元素紧跟随着A元素，两元素之间用 + 隔开

2、属性的选择器
attr：属性
val：属性值

[ attr ]：所匹配具有这个属性的元素；
[ attr=val ]：所匹配具有这个属性而且属性值为val的元素
[ attr^=val ]：所匹配以attr属性值为val开头
[ attr$=val ]：所匹配以attr属性值为val结尾

3、伪类选择器

:link 未被点击过的
:hover 鼠标划过的样式
:active 鼠标点击未松开的样式
:visited 鼠标点击过后的样式

hover伪类选择器
鼠标划入父级div，子元素的样式会改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .mydiv{
            width:800px;
            height:500px;
            border:5px solid #0f0;
            margin:50px auto 0;
        }
        /* .mydiv:hover{
            border:5px solid red;
            background-color:yellow;
        } */
        .mydiv:hover .mydiv1{
            border:5px solid #000;
            background-color: #f00;
        }
        .mydiv1{
            width:400px;
            height:400px;
            border:5px solid #0ff;
            margin:50px auto 0;
        }
    </style>
</head>
<body>
    <div class='mydiv'>
        <div class="mydiv1"></div>
    </div>
</body>
</html>

4、display
display：none；样式消失
样式是完全消失，不会在我们页面中占位置；
若想让样式显示的话用display：block；

沭瑾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（10）HTML&&CSS笔记（伪元素，高级选择器）

1、选择器群组选择器：同时匹配共同的样式，元素与元素之间用逗号隔开；后代选择器：同时匹配A元素的后代B元素，两元素之间用空格隔开；子元素选择器：匹配A元素的子代B元素，两元素之间用大于隔开；毗邻选择器：B元素紧跟随着A元素，两元素之间用 + 隔开2、属性的选择器attr：属性val：属性值[ attr ]：所匹配具有这个属性的元素；[ attr=val ]：所匹配具有这个属性而且...
复制链接

扫一扫

专栏目录