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. 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)

    这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...

  2. 修改Nginx的header伪装服务器

    有时候为了伪装自己的真实服务器环境.不像让对方知道自己的webserver真实环境,就不得不修改我们的webserer软件了!今天看了一下baidu.com的webserver感觉像是nginx修改的 ...

  3. QString 和char数组转换(转)

    在qt开发过程中经常遇到QString类和char数组进行转换,在此记录一下: QString->char数组 1 2 3 QString str="12fff"; QByt ...

  4. Anglarjs 工具方法

    Angularjs 常用方法 1. isArray使用 效果图如下,结果为true 2.uppercase使用 $scope.name = "zhangsan"; $scope.n ...

  5. Hyper-V 虚拟机连网

    参考:http://www.cnblogs.com/chenxizhang/p/3188005.html(个人推荐) 参考:http://blog.csdn.net/elvis_0123/articl ...

  6. Android getprop setprop watchprops用法

    转载请注明出处:https://www.cnblogs.com/lialong1st/p/10172973.html 在安卓系统中,当你写了一个脚本,已经添加到开机启动 init.rc 中,即使脚本中 ...

  7. TextBox(只允许输入字母或者数字)——重写控件

    实现如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...

  8. man page ，info page 和/usr/share/doc/整理自鸟哥

    - 比如查看date指令   - 命令:vbird@www ~]$ man date   - 返回示例(部分):DATE(1) User Commands DATE(1)   - 部分释义(注释2): ...

  9. var_dump() 查看字符的类型 方法

  10. https单向认证服务端发送到客户端到底会不会加密？

    最近向大神请教了CA认证单向认证和双向认证的问题,有一点不太明白,单向认证的时候,为什么服务端发送到客户端的东西也是加密的?