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. A glance at C# vNext

    Contents Introduction Background A list of features Primary constructor Read only auto-properties St ...

  2. silverlight 进行本地串口调用的一种可行的解决方法

    silverlight 是一个很不错的开发平台,我们可以设计出很绚丽的界面,用户可以拥有很好的体验,但是就目前来说,进行本地串口的直接调用时不行的,因为安全的原因,有没有相对简单的调用方式呢? 答案是 ...

  3. zstack快速安装文档

    1.环境准备 1.1 准备软件工具 系统镜像 ZStack-x86_64-DVD-2.1.1.514.iso Zstack安装包 ZStack-installer-2.1.1.514.bin http ...

  4. python 如何将md5转为16字节

    python的hashlib库中提供的hexdigest返回长度32的字符串. md5sum是128bit,也就是16字节,如何将python生成字符串的转为16字节呢? 请看下面代码 import ...

  5. docker 里面的supervisord不断killed

    这个原因就一般是百度上大家说的,内存不足啦 但是死也得死个明白 用这个命令 dmesg | egrep -i -B100 'killed process' 看一下就知道了 我的是docker限制了内存 ...

  6. 关于Spring IOC (DI-依赖注入)

    <Spring入门经典>这本书无论对于初学者或者有经验的工程师还是很值一看的,最近花了点时间回顾了Spring的内容,在此顺带记录一下,本篇主要与spring IOC相关 ,这篇博文适合初 ...

  7. mysql联表查询

    2.1 内连接 select a.*,b.* FROM  a INNER join  b  ON a.id = b.id;  查出所有 或者 select a.*,b.* FROM a join b ...

  8. webstorm打开后无法显示文件夹目录

    最近接触webstorm,上午研究怎么删除项目,不小心把项目在目录中删除了,然后重新创建时,无法显示了. 状况类似这样的 百度上搜了一些没搜到,关键字是“webstorm 项目 目录 无法显示文件夹” ...

  9. 大数据工具篇之flume1.4-安装部署指南

    一.引言 flume-ng是一个分布式.高可靠和高效的日志收集系统,flume-ng是flume的新版本的意思,其中“ng”意为new generate(新一代),目前来说,flume-ng 1.4是 ...

  10. springMVC集成CXF快速发布webService

    本文转载自:http://www.cnblogs.com/xiaochangwei/p/5399507.html 继上一篇webService入门之后,http://www.cnblogs.com/x ...