前端-CSS-4-伪类选择器&伪元素选择器

1、伪类选择器（爱恨原则）

----------------------------------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------------

    /*'爱恨原则' love hate*/
        /*没有被访问的a标签的样式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*访问过后的a标签的样式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠标悬停时a标签的样式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠标点住的时候a标签的样式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }
        
        /*选中第一个元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*选中最后一个元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*选中当前指定的元素  数值从1开始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示选中所有 从0开始的  0的时候表示没有选中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶数*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇数*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔几换色  隔行换色*/
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }









    </style>
</head>
<body>

    <div class="box">
        <ul>
            <li class="item1">
                1
                <a href="#">张三</a>
            </li>
            <li class="item2">
                2
                <a href="#">李四</a>
            </li>
            <li class="item3">
                3
                <a href="#">王八</a>
            </li>
            <li class="item4">
                4
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                5
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                6
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                7
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                8
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                9
                <a href="#">赵六</a>
            </li>
            <li class="item4">
                10
                <a href="#">赵六</a>
            </li>
        </ul>
    </div>
    
</body>
</html>

2、伪元素选择器

   <style type="text/css">

        /*设置第一个首字母的样式 first-letter
        用于为文本的首字母设置特殊样式。
        */
        p:first-letter{
            color: red;
            font-size: 30px;
        }

        /* 在....之前 添加内容   这个属性使用不是很频繁 了解
        使用此伪元素选择器一定要结合content属性
        用于在元素的内容前面插入新内容。
        */
        p:before{
            content: 'university';
        }

        /*在....之后 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）
        用于在元素的内容后面插入新内容。
        */
        p:after{
            content: '$';
            color: red;
            font-size: 30px;

        }

posted on 2018-10-20 23:55 foremost 阅读(572) 评论(0) 收藏举报