伪类选择器

https://www.cnblogs.com/smyhvae/p/8280814.html 该作者对常规动态伪类选择器做了细致的介绍

目标伪类选择器

：target

文本中设置了一个锚点当点击它时会跳转到该页面的某处（例如锚点设为a herf=“achor” 当点击这个锚点时就会跳向id为achor的元素（我们称其为锚点目标））

：target的作用就是为锚点目标设置属性当点击锚点时锚点目标上显示我们设置的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:target {
            background-color: gold;
        }

        /* 在目标元素中增加一个伪元素*/
        p:target::before {
            /*font: 70% sans-serif;*/
            content: "adv";
            color: red;
            margin-right: 20px;
        }

        /*在目标元素中使用italic样式*/
        p:target i {
            color: red;
        }
    </style>
</head>
<body>
<h3>Table of Contents</h3>
<ol>
    <li><a href="#p1">Jump to the first paragraph!</a></li>
    <li><a href="#p2">Jump to the second paragraph!</a></li>
    <li><a href="#nowhere">This link goes nowhere,
        because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
    URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
    from the links above. Isn't that delightful?</p>

</body>
</html>

实例2 模仿弹出框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出框</title>
    <style>
        .lightbox{
            display: none;
        }
        .lightbox:target{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            /*background: lightblue;*/
        }
        .lightbox figcaption{
            width: 25rem;
            position: relative;
            padding: 1.5em;
            background-color: lightpink;
        }
        .lightbox .close{
            position: relative;
            display: block;
        }
        .lightbox .close::after{
            right: -1rem;
            top: -1rem;
            width: 2rem;
            height: 2rem;
            position: absolute;
            display: flex;
            z-index: 1;
            align-items: center;
            justify-content: center;
            background-color: black;
            border-radius: 50%;
            color: white;
            content: "×";
            cursor: pointer;
        }
        .lightbox .close::before {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgba(0,0,0,.7);
            content: "";
            cursor: default;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#example1">Open example #1</a></li>
    <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
    <figure>
        <a href="#" class="close"></a>
        <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
    </figure>
</div>

<div class="lightbox" id="example2">
    <figure>
        <a href="#" class="close"></a>
        <figcaption>Cras risus odio, pharetra nec ultricies et,
            mollis ac augue. Nunc et diam quis sapien dignissim auctor.
            Quisque quis neque arcu, nec gravida magna.</figcaption>
    </figure>
</div>

</body>
</html>

实例2中涉及了flex布局和定位布局

flex布局参照阮大神的，反正我一直把flex当黑盒用

定位布局贴几张图吧

3手风琴样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴</title>
    <style>
        .accordionMenu{
            background: #ffffff;
            color:#424242;
            font: 12px Arial, Verdana, SansSerif;
            margin: 0 auto;
            padding: 10px;
            width: 500px;

        }
        .accordionMenu h2{
            margin:20px 0;
            position: relative;     /*相对定位 也不知是不是为绝对定位准备的 行内元素无法设置宽度 高度 行高*/
        }
        .accordionMenu h2::before{          /*制作下三角效果*/
            position: absolute;
            right: 10px;
            top: 15px;
            border:5px solid #fff0f0;
            border-color: #fff transparent transparent;   /*模拟三边型*/
            content: "";
            height: 0;
            width: 0;

        }
        /*制作手风琴标题栏效果*/
        .accordionMenu h2 a{
            background: #8f8f8f;
            background: -webkit-gradient(linear, left top, left bottom, from(#cecece),to(#8f8f8f));
            border-radius: 5px;
            color: #424242;
            font-size: 13px;
            margin: 0 ;
            display: block;
            padding: 10px 10px;
            text-decoration: none;
            text-shadow:  2px 2px 2px #aeaeae;

        }
        .accordionMenu :target h2 a,
        .accordionMenu h3 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active{
            background: #2288dd;
            background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff),to(#2288dd));
            color:#fff;
        }
        .accordionMenu p{
            margin: 0;
            height: 0;
            overflow: hidden;
            padding: 0 10px;
            transition: height 0.5s ease-in;

        }
        .accordionMenu :target p{
            height:100px;
            overflow: auto;
        }



    </style>
</head>
<body>

    <div class="accordionMenu">
        <div class="menuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2>
            <p>LORE ISPOM</p>
        </div>
        <div class="menuSection" id="promotion">
            <h2><a href="#promotion">Promotion</a></h2>
            <p>LORE ISPOM</p>
        </div>
        <div class="menuSection" id="event">
            <h2><a href="#event">Event</a></h2>
            <p>LORE ISPOM</p>
        </div>
    </div>

</body>
</html>

posted @ 2019-03-28 21:33 monstermr 阅读(214) 评论(0) 收藏举报

刷新页面返回顶部

monstermr

伪类选择器

公告