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

来源：互联网发布：linux spi驱动编辑：程序博客网时间：2024/05/16 07:07

目标伪类选择器：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;}

阅读全文

1 0