复习CSS时发现很多选择器不会，因为平时很少用到。现在干脆一不做二不修，全部温习一遍。本文参考http://css.doyoe.com/.

一、元素选择器

　　

　　图片来自：http://css.doyoe.com/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素选择器</title>

    <style type="text/css">

        h1{

            background: red;

        }

        #ppp{

            color: blue;

        }

        .ccc{

            border: 1px solid yellow;

        }

    </style>

</head>

<body>

    <h1>我是h1</h1><br>

    <p id="ppp">我是p</p><br>

    <ul class="ccc">

        <li>我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>我是li5</li>

    </ul>

</body>

</html>

二、关系选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素选择器</title>

    <style type="text/css">

        .u1 li{

            border: 1px solid blue;

        }

        .u2>li{

            border: 1px solid blue;

        }

        .u3 li+li{

            background: yellow;

        }

        .u4 .firstli~li{

            border: 1px solid black;

        }

    </style>

</head>

<body>

     <h6>第二个ul</h6>

    <ul class="u1">

        <li>我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>

            <ul>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

            </ul>

        </li>

    </ul>

    <h6>第二个ul</h6>

    <ul class="u2">

        <li>我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>

            <ul>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

            </ul>

        </li>

    </ul>

    <h6>第三个ul</h6>

    <ul class="u3">

        <li>我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>

            <ul>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

            </ul>

        </li>

    </ul>

    <h6>第四个ul</h6>

    <ul class="u4">

        <li class="firstli">我是li1</li>

        <li>我是li2</li>

        <li>我是li3</li>

        <li>我是li4</li>

        <li>

            <ul>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

                <li>我是第二级别的li</li>

            </ul>

        </li>

    </ul>

</body>

</html>

三、属性选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style type="text/css">

        .u1 li[class]{

            background: blue;

        }

        .u2 li[class^='aa']{

            border: 1px solid red;

        }

        .u2 li[class$='bb']{

            border: 1px solid black;

        }

        .u3 li[class*=dd]{

            background: yellow;

        }

        .u3 li[class|='aa']{

            background: black;

        }

    </style>

</head>

<body>

    <h6>第一个ul</h6>

    <ul class="u1">

        <li>我是li1</li>

        <li>我是li2</li>

        <li class="ddbb">我是li3</li>

        <li>我是li4</li>

    </ul>

    <h6>第二个ul</h6>

    <ul class="u2">

        <li class="aaee">我是li1</li>

        <li class="aacc">我是li2</li>

        <li class="ddbb">我是li3</li>

        <li class="wwbb">我是li4</li>

    </ul>

    <h6>第三个ul</h6>

    <ul class="u3">

        <li class="aa-bb">我是li1</li>

        <li class="xx-aa">我是li2</li>

        <li class="dd-bb">我是li3</li>

        <li>我是li4</li>

    </ul>

</body>

</html>

四、伪类选择器

　　天哪这么多，用不了那么多吧。测试几个，容我花5分钟背一背

　　http://css.doyoe.com/selectors/pseudo-classes/index.htm

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类</title>

    <style type="text/css">

        .u1 li:first-child{

            background: red;

        }

        .u1 li:last-child:hover{

            background: blue;

        }

        .u1 li:nth-child(2){

            background: yellow;

        }

        ul:empty{

            border: 1px solid black;

        }

        .u3 li:not(.aa-bb){

            background: red;

        }

    </style>

</head>

<body>

    <h6>第一个ul</h6>

    <ul class="u1">

        <li>我是li1</li>

        <li>我是li2</li>

        <li class="ddbb">我是li3</li>

        <li>我是li4</li>

    </ul>

    <h6>第二个ul</h6>

    <ul class="u2" style="height: 20px"></ul>

    <h6>第三个ul</h6>

    <ul class="u3">

        <li class="aa-bb">我是li1</li>

        <li class="xx-aa">我是li2</li>

        <li class="dd-bb">我是li3</li>

        <li>我是li4</li>

    </ul>

</body>

</html>

五、伪元素选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <style type="text/css">

        p::first-line{

            color: red;

        }

        p::first-letter{

            font-size: 40px;

        }

        p::before{

            content: "##";

        }

        p::after{

            content: "$$";

        }

        input::placeholder{

            color: red;

        }

        input::selection{

            border: 1px solid blue;

        }

    </style>

</head>

<body>

    <p>CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

    紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性

    </p>

    <input type="text" name="" placeholder="哈哈哈哈">

    <input type="text" name="" value="ffffffffff">

</body>

</html>

　　测试完毕！参考：http://css.doyoe.com/

CSS3选择器～一看吓一跳，这么多不会的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  3. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  4. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  5. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  6. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  7. css3 选择器（二）

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  8. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

  9. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  10. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

随机推荐

  1. 【转载】简析TCP的三次握手与四次分手

    最近在补习HTTP协议相关知识点,看到这篇讲得不错,所以转载收藏一下,同时也分享给大家.原文地址:http://www.jellythink.com/archives/705,版权归原作者所有. TC ...

  2. Javascript学习十

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. Swift 包管理器命令行使用

    1.swift -version //swift 版本查看 2.swift build //swift工程编译 3.swift package generate-xcodeproj //创建Xcode ...

  4. beauty

    至你我最美的邂逅 年意渐渐消失,一转眼元宵的炮竹将要响起,今天是贰零一七年二月九号,即是元宵节前两天,在这里我写下我这几天的收获. 离元宵节还有四天,我好久都没跟朋友一起认真的玩过,几天我去了我发小的 ...

  5. JavaScript数据结构——栈的实现

    栈(stack)是一种运算受限的线性表.栈内的元素只允许通过列表的一端访问,这一端被称为栈顶,相对地,把另一端称为栈底.装羽毛球的盒子是现实中常见的栈例子.栈被称为一种后入先出(LIFO,last-i ...

  6. cocos2dx 魔塔项目总结（一）

    <魔塔天城>发布已经有半年的时间了,一直想找时间来总结一下这个项目,但总是一拖再拖.如果再这么拖下去,就永远都不会有时间来写这个总结了,时间总是挤出来的. 魔塔天城使用的cocos2dx ...

  7. UITableView 编辑模式(增加-删除-移动---自定义左滑 title)

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  8. java异常详解

    java异常需要弄清楚如下几个问题: 1.java异常的层次结构 2.搞清楚问题:java中异常抛出后代码还会继续执行吗? 答:该问题可以参考该博文,完美的回答了我的疑惑:http://www.cnb ...

  9. 机器学习基石 4 Feasibility of Learning

    机器学习基石 4 Feasibility of Learning Learning is Impossible? 机器学习:通过现有的训练集 \(D\) 学习,得到预测函数 \(h(x)\) 使得它接 ...

  10. Redis Sentinel中的机制与原理详解

    序言 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案.实际上这意味着你可以使用Sentinel模式创建一个可以不用人为干预而应对各种故障的Redis部署. 它的主要功能有以 ...