CSS3伪类选择--目标伪类选择器

最新推荐文章于 2024-04-25 20:37:26 发布

guoyangyang@666

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量5.7k

点赞数 6

分类专栏：前端笔记

本文链接：https://blog.csdn.net/guoyangyang123456/article/details/72842749

版权

前端笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

目标伪类选择器：E：target，选择匹配E的所有元素，并且匹配元素被相关URL指向。

目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。

例子：纯CSS3实现手风琴效果

效果展示：

初始页面：

点击之后的页面：

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>手风琴</title>
    <link rel="stylesheet" href="./Style.css" type="text/css">
</head>
<body>
    <div class="accordionMenu">
        <div class="munuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2>
            <p>第一个区域</p>
        </div>
        <div class="munuSection" id="promotion">
            <h2><a href="#promotion">Promotion</a></h2>
            <p>第二个区域</p>
        </div>
        <div class="munuSection" id="event">
            <h2><a href="#event">Event</a></h2>
            <p>第三个区域</p>
        </div>
    </div>
</body>
</html>

CSS代码：

/*设置位置*/
.accordionMenu{
    background: #fff;
    color: #424242;
    margin: 0 auto;
    width: 500px;
    border: 1px solid red;
    font-size: 12px;
    font-family: Arial, Verdana, sans-serif;
}
/*accordionMenu下所有的子元素或者孙辈元素h2*/
.accordionMenu h2{
    margin: 5px 0;
    position: relative;
}

/*制作向下三角效果*/
.accordionMenu h2:before {
    border: 5px solid black;
    content: "";
    height: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    border-color:#fff transparent transparent transparent;
    width: 0;
}

/*制作手风琴标题栏效果*/
.accordionMenu h2 a{
    background: #8f8f8f;
    display: block;/*块级元素，铺满整个区域*/
    color:#424242;/*默认的字体颜色*/
    font-size: 13px;
    margin: 0;
    padding: 10px 10px;/*文字距离四周的间距*/
    text-shadow: 2px 2px 2px #aeaeae;
    text-decoration: none;
}

/*目标标题的效果，点击之后标题的效果*/
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active{
    background: #2288dd;
    color:#FFF;
}

/*标题栏对应的内容*/
.accordionMenu p{
    margin: 0;
    height: 0;/*默认栏目内容高度为0，达到隐藏的效果*/
    overflow: hidden;
    /*padding: 0 10px;*/
}
/*关键代码，展开对应目标内容*/
.accordionMenu :target p{
    height: 100px;
    overflow: auto;
}
/*展开时标题上的三角效果*/
.accordionMenu :target h2:before{
    border-color: transparent transparent transparent #fff;
}

guoyangyang@666

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪类选择--目标伪类选择器

目标伪类选择器：E：target，选择匹配E的所有元素，并且匹配元素被相关URL指向。目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。例子：纯CSS3实现手风琴效果效果展示：初始页面：点击之后的页面：点击之后的页面：HTML代码：
复制链接

扫一扫

专栏目录