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. 用C#通过反射实现动态调用WebService 告别Web引用（转载）

    我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...

  2. 【转】每天一个linux命令（6）：rmdir 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/10/27/2742076.html 今天学习一下linux中命令: rmdir命令.rmdir是常用的命 ...

  3. 核心重点lxml

    from lxml import html htmlStr = html.etree.HTML(pagehtml, parser= html.etree.HTMLParser(encoding='ut ...

  4. 阿里巴巴Java开发手册- 控制语句

    1. [强制]在一个 switch 块内,每个 case 要么通过 break / return 等来终止,要么注释说明程序将继续执行到哪一个 case 为止 : 在一个 switch 块内,都必须包 ...

  5. dzzoffice协同办公平台与onlyoffice在线协作平台安装与部署

    1.安装dzzoffice协同办公平台 DzzOffice是一套开源办公套件,适用于企业.团队搭建自己的 类似“Google企业应用套件”.“微软Office365”的企业协同办公平台. 官网地址:h ...

  6. oracle锁表查询

    ORACLE EBS操作某一个FORM界面,或者后台数据库操作某一个表时发现一直出于"假死"状态,可能是该表被某一用户锁定,导致其他用户无法继续操作 复制代码代码如下: --锁表查 ...

  7. git Push failed: Could not read from remote repository 解决方案

    解决的办法很简单,进入Android Studio配置界面,选择Version Control——>Git,在右边界面切换SSH下拉选项为Native,最后重新提交.如果解决你的问题,记得分享哦 ...

  8. Gradle Build速度加快终极方法（android studio）

    Android Studio用起来越来越顺手,但是却发现Build的速度实在不敢恭维,在google和度娘了几把(....)之后,大体就是分配更高的内存,步骤:Setting-->搜索gradl ...

  9. 【ActiveMQ入门-5】ActiveMQ学习-Queue与Topic的比较

    Queue与Topic的比较 1.JMS Queue执行load balancer语义: 一条消息仅能被一个consumer收到. 如果在message发送的时候没有可用的consumer,那么它将被 ...

  10. 垃圾收集器之：CMS收集器

    HotSpot JVM的并发标记清理收集器(CMS收集器)的主要目标就是:低应用停顿时间.该目标对于大多数交互式应用很重要,比如web应用.在我们看一下有关JVM的参数之前,让我们简要回顾CMS收集器 ...