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

一、元素选择器

　　

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>元素选择器</title>
  6.     <style type="text/css">
  7.         h1{
  8.             background: red;
  9.         }
  10.         #ppp{
  11.             color: blue;
  12.         }
  13.         .ccc{
  14.             border: 1px solid yellow;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <h1>我是h1</h1><br>
  20.     <p id="ppp">我是p</p><br>
  21.     <ul class="ccc">
  22.         <li>我是li1</li>
  23.         <li>我是li2</li>
  24.         <li>我是li3</li>
  25.         <li>我是li4</li>
  26.         <li>我是li5</li>
  27.     </ul>
  28. </body>
  29. </html>

二、关系选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>元素选择器</title>
  6.     <style type="text/css">
  7.         .u1 li{
  8.             border: 1px solid blue;
  9.         }
  10.         .u2>li{
  11.             border: 1px solid blue;
  12.         }
  13.         .u3 li+li{
  14.             background: yellow;
  15.         }
  16.         .u4 .firstli~li{
  17.             border: 1px solid black;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.      <h6>第二个ul</h6>
  23.     <ul class="u1">
  24.         <li>我是li1</li>
  25.         <li>我是li2</li>
  26.         <li>我是li3</li>
  27.         <li>我是li4</li>
  28.         <li>
  29.             <ul>
  30.                 <li>我是第二级别的li</li>
  31.                 <li>我是第二级别的li</li>
  32.                 <li>我是第二级别的li</li>
  33.             </ul>
  34.         </li>
  35.     </ul>
  36.     <h6>第二个ul</h6>
  37.     <ul class="u2">
  38.         <li>我是li1</li>
  39.         <li>我是li2</li>
  40.         <li>我是li3</li>
  41.         <li>我是li4</li>
  42.         <li>
  43.             <ul>
  44.                 <li>我是第二级别的li</li>
  45.                 <li>我是第二级别的li</li>
  46.                 <li>我是第二级别的li</li>
  47.             </ul>
  48.         </li>
  49.     </ul>
  50.     <h6>第三个ul</h6>
  51.     <ul class="u3">
  52.         <li>我是li1</li>
  53.         <li>我是li2</li>
  54.         <li>我是li3</li>
  55.         <li>我是li4</li>
  56.         <li>
  57.             <ul>
  58.                 <li>我是第二级别的li</li>
  59.                 <li>我是第二级别的li</li>
  60.                 <li>我是第二级别的li</li>
  61.             </ul>
  62.         </li>
  63.     </ul>
  64.     <h6>第四个ul</h6>
  65.     <ul class="u4">
  66.         <li class="firstli">我是li1</li>
  67.         <li>我是li2</li>
  68.         <li>我是li3</li>
  69.         <li>我是li4</li>
  70.         <li>
  71.             <ul>
  72.                 <li>我是第二级别的li</li>
  73.                 <li>我是第二级别的li</li>
  74.                 <li>我是第二级别的li</li>
  75.             </ul>
  76.         </li>
  77.     </ul>
  78. </body>
  79. </html>

三、属性选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>属性选择器</title>
  6.     <style type="text/css">
  7.         .u1 li[class]{
  8.             background: blue;
  9.         }
  10.         .u2 li[class^='aa']{
  11.             border: 1px solid red;
  12.         }
  13.         .u2 li[class$='bb']{
  14.             border: 1px solid black;
  15.         }
  16.         .u3 li[class*=dd]{
  17.             background: yellow;
  18.         }
  19.         .u3 li[class|='aa']{
  20.             background: black;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <h6>第一个ul</h6>
  26.     <ul class="u1">
  27.         <li>我是li1</li>
  28.         <li>我是li2</li>
  29.         <li class="ddbb">我是li3</li>
  30.         <li>我是li4</li>
  31.     </ul>
  32.     <h6>第二个ul</h6>
  33.     <ul class="u2">
  34.         <li class="aaee">我是li1</li>
  35.         <li class="aacc">我是li2</li>
  36.         <li class="ddbb">我是li3</li>
  37.         <li class="wwbb">我是li4</li>
  38.     </ul>
  39.     <h6>第三个ul</h6>
  40.     <ul class="u3">
  41.         <li class="aa-bb">我是li1</li>
  42.         <li class="xx-aa">我是li2</li>
  43.         <li class="dd-bb">我是li3</li>
  44.         <li>我是li4</li>
  45.     </ul>
  46. </body>
  47. </html>

四、伪类选择器

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

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

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>伪类</title>
  6.     <style type="text/css">
  7.         .u1 li:first-child{
  8.             background: red;
  9.         }
  10.         .u1 li:last-child:hover{
  11.             background: blue;
  12.         }
  13.         .u1 li:nth-child(2){
  14.             background: yellow;
  15.         }
  16.         ul:empty{
  17.             border: 1px solid black;
  18.         }
  19.         .u3 li:not(.aa-bb){
  20.             background: red;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <h6>第一个ul</h6>
  26.     <ul class="u1">
  27.         <li>我是li1</li>
  28.         <li>我是li2</li>
  29.         <li class="ddbb">我是li3</li>
  30.         <li>我是li4</li>
  31.     </ul>
  32.     <h6>第二个ul</h6>
  33.     <ul class="u2" style="height: 20px"></ul>
  34.     <h6>第三个ul</h6>
  35.     <ul class="u3">
  36.         <li class="aa-bb">我是li1</li>
  37.         <li class="xx-aa">我是li2</li>
  38.         <li class="dd-bb">我是li3</li>
  39.         <li>我是li4</li>
  40.     </ul>
  41. </body>
  42. </html>

五、伪元素选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>属性选择器</title>
  6.     <style type="text/css">
  7.         p::first-line{
  8.             color: red;
  9.         }
  10.         p::first-letter{
  11.             font-size: 40px;
  12.         }
  13.         p::before{
  14.             content: "##";
  15.         }
  16.         p::after{
  17.             content: "$$";
  18.         }
  19.         input::placeholder{
  20.             color: red;
  21.         }
  22.         input::selection{
  23.             border: 1px solid blue;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <p>CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
  29.     紫色 链接表示该属性在CSS3有修改或者增加了新的属性值；橙色 链接表示该属性是CSS3新增属性
  30.     </p>
  31.     <input type="text" name="" placeholder="哈哈哈哈">
  32.     <input type="text" name="" value="ffffffffff">
  33. </body>
  34. </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. linux目录结构解析

    "/" :Linux文件系统的入口.也是最高一级的目录. "/bin":基本系统所需要的命令,功能和"/usr/bin"类似,这个目录下的文 ...

  2. HTML5 DragEvent

    DragEvent是一个表示drag和drop交互的DOM event接口.用户通过将指针设备(如:鼠标)放在目标的表面开始拖动,然后拖动指针到一个新的位置(如其他DOM元素).应用程序自动的解析拖放 ...

  3. MegCup 2017 极客挑战赛 初赛试题

    看着像八卦,数数不是八卦,是29卦 每卦又有29个小弧 所以是29×29个bit 这29×29个bit怎么理解呢?并且从哪一卦开始到哪一卦结束?是先环向层层向里走还是先径向逐卦走? 我想不出来. 我猜 ...

  4. iOS回顾笔记（ 01 ）

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  5. 【转】jqGrid学习之介绍

    JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情.   ...

  6. angular : ng-animate : ng-show 原理，详解

    这是我第一次写博客,请大家多多指教^^ 拷贝试试 <!DOCTYPE html> <html> <head> <meta http-equiv="C ...

  7. 项目架构开发：数据访问层之Repository

    接上文 项目架构开发:数据访问层之Logger 本章我们继续IRepository开发,这个仓储与领域模式里边的仓储有区别,更像一个工具类,也就是有些园友说的“伪仓储”, 这个仓储只实现单表的CURD ...

  8. TypeScript 优秀开源项目大合集

    TypeScript出来有段时间了,也冒出了很多用TypeScript开发的优秀开源项目,搜寻了一些基于TypeScript项目,分享给大家: https://github.com/brookshi/ ...

  9. ACM 阶乘数位数

    描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出N!的位数有多少(十进制)?   输入 首行输入n,表示有多少组测试数据(n<1 ...

  10. 基于requirejs+bluebird，50行代码实现轻巧实用的前端CMD加载器

    首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...