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;

        }

前端-CSS-4-伪类选择器&伪元素选择器的更多相关文章

  1. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  2. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  3. 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

  4. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  5. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  6. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  7. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  8. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  9. CSS 之 伪类及伪元素

    伪类和伪元素用起来非常的方便,在查阅资料及测试后整理下来. 一.伪类 CSS 伪类用于向某些选择器添加特殊的效果.伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或 ...

  10. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

随机推荐

  1. oracle归档日志配置查询

    归档日志(Archive Log)是非活动的重做日志备份.通过使用归档日志,可以保留所有重做历史记录,当数据库处于ARCHIVELOG模式并进行日志切换式,后台进程ARCH会将重做日志的内容保存到归档 ...

  2. js一种继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  3. sql 防注入 维基百科

    http://zh.wikipedia.org/wiki/SQL%E8%B3%87%E6%96%99%E9%9A%B1%E7%A2%BC%E6%94%BB%E6%93%8A SQL攻击(SQL inj ...

  4. 异步FIFO格雷码与空满

    在传递读写时钟域的指针使用格雷码来传递,如何把二进制转换为格雷码,格雷码是如何判断读空写满呢? 二进制码转换成二进制格雷码,其法则是保留二进制码的最高位作为格雷码的最高位,而次高位格雷码为二进制码的高 ...

  5. volatile关键字的作用、原理

    在只有双重检查锁,没有volatile的懒加载单例模式中,由于指令重排序的问题,我确实不会拿到两个不同的单例了,但我会拿到"半个"单例. 而发挥神奇作用的volatile,可以当之 ...

  6. ansible的安装过程 和基本使用

    之前安装了一遍,到最后安装成功的时候出现了这种问题: [root@localhost ~]# ansible webserver -m command -a 'uptime' ............ ...

  7. 小峰servlet/jsp（7）jstl国际化标签库、sql标签库等

    一.jstl国际化标签库: fmt:setLocale 设定用户所在的区域: fmt:formatDate   对日期进行格式化 fmt:requestEncoding 设置所有的请求编码; fmt: ...

  8. matplot 代码实例2

    要画出如上图(注意原点有边距),怎么办呢? 简单而优雅,请看代码: #!/usr/bin/env python # coding=utf-8 import matplotlib.pyplot as p ...

  9. 扫盲贴，802.11AD

    早在去年,大家已经开始关注新的802.11ad规范,其高频高带宽低延迟的特性也让大家对将来的无线网络应用形态充满了期待,而今年的CES2016展会上,已经有不少的802.11ad产品出现,看来2016 ...

  10. [UE4]蓝图Get Control Rotation获取人物角色朝向，设置默认人物相机，朝向与controller绑定

    具体应用:控制人物移动方向 也可以使用“CombineRotators”将角色控制器Z轴旋转90°,然后再取正面方向,达到跟“Get Right Vector”一样的效果: 设置关联人物朝向使用控制器 ...