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. 处理json的常用java类库：Json-lib(org.json)、Gson、Jackson、Fastjson

    更多的处理json的java类库,有人做了性能对比,GitHub地址:https://github.com/fabienrenaud/java-json-benchmark 处理json的java类库 ...

  2. Java中的null

    null是Java中的关键字,像public.static.final.它是大小写敏感的,你不能将null写成Null或NULL,编译器将不能识别它们然后报错. Object obj = NULL; ...

  3. 浅谈fhq_treap

    \(BST\) 二叉查找树,首先它是一颗二叉树,其次它里面每个点都满足以该点左儿子为根的子树里结点的值都小于自己的值,以该点右儿子为根的子树里结点的值都大于自己的值.如果不进行修改,每次查询都是\(O ...

  4. Spring Cloud 入门 之 Hystrix 篇（四）

    原文地址:Spring Cloud 入门 之 Hystrix 篇(四) 博客地址:http://www.extlight.com 一.前言 在微服务应用中,服务存在一定的依赖关系,如果某个目标服务调用 ...

  5. 【python】正则表达式-常用函数

    m = re.search(pattern, string) # 搜索整个字符串,直到发现符合的子字符串. m = re.match(pattern, string) # 从头开始检查字符串是否符合正 ...

  6. 【python】class之super关键字的作用

    在Python类的方法(method)中,要调用父类的某个方法,在Python 2.2以前,通常的写法如代码段1: 代码段1: class A: def __init__(self):    prin ...

  7. Linq快速入门——Lambda表达式的前世今生

    Linq快速入门——Lambda表达式的前世今生   Lambda表达式其实并不陌生,他的前生就是匿名函数,所以要谈Lambda表达式,就不得不谈匿名函数,要谈匿名函数,那又要不得不谈委托. 何为委托 ...

  8. 计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll解决办法

    今天开始Python学习之旅,安装配置好Python环境之后,在命令行中输入Python命令,提示“计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll...” 解决办法: ...

  9. 1043 Is It a Binary Search Tree （25 分）

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  10. Mac parallels desktop安装windows，linux

    前言 这款软件你就看作是虚拟机vm,如果你要安装win10系统,请下载ios镜像文件 下载准备工作 Parallels Desktop 13 破解版本 联系站长所要 win10 iso镜像文件    ...