• 1、选择器中符号含义汇总(这部分包含了对选择器的通用理解):
    • 1.1、多元素组合符号:(共6个,一个是CSS3的)
      (适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合)
      • 没有符号:且的关系
      • 逗号(,):或的关系;
      • 空格( ):后代关系(多级);
      • >:子元素(一级)
      • +:相邻兄弟,紧随之后的同级关系(中间不能有其他元素)
      • ~:同级元素(兄弟)通用选择器。所有相同父元素中,位于 p 元素之后的所有 ul 元素(CSS3才有)
    • 1.2、属性以及属性值符号:(共7种)
      • []:包含属性
        • =:属性值等于(完全匹配)
        • ~=:多个属性值(空格分隔)中有一个等于(包含)
        • |=:多个属性值(连字号 - 分隔 )中有一个等于(包含)
        • ^=:以其开头(子串匹配属性)
        • $=:以其结尾(子串匹配属性)
        • *=:包含子串(子串匹配属性)
    • 1.3、冒号(:):,表示伪类
  • 2、基本选择器:
    • *:通用元素选择器,匹配任何元素
    • E:标签选择器,匹配所有使用E标签的元素
    • .info:class选择器,匹配所有class属性中包含info的元素
    • #footer:id选择器,匹配所有id属性等于footer的元素
  • 3、多元素的组合选择器(5个)
    • EF:同时包含E元素和F元素,E和F之间什么都没有(自己补充)
    • E,F:多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
    • E F:后代元素选择器(也可称为派生选择器),匹配所有属于E元素后代的F元素,E和F之间用空格分隔
    • E > F:子元素选择器,匹配所有E元素的子元素F
    • E + F:毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
  • 4、属性选择器
    • CSS 2.1 
      • E[att]:匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如"[cheacked]"。以下同。)
      • E[att=val]:匹配所有att属性等于"val"的E元素
      • E[att~=val]:匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
      • E[att|=val]:匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素,主要用于lang属性,比如"en"、"en-us"、"en-gb"等等
    • CSS 3
      • E[att^="val"]:属性att的值以"val"开头的元素
      • E[att$="val"]:属性att的值以"val"结尾的元素
      • E[att*="val"]:属性att的值包含"val"字符串的元素
  • 5、伪类和伪元素:
    • 5.1 CSS 2.1 伪元素
      • E:first-line:匹配E元素的第一行
      • E:first-letter:匹配E元素的第一个字母
      • E:before:在E元素之前插入生成的内容
      • E:after:在E元素之后插入生成的内容
    • 5.2 CSS 2.1 伪类
      • E:first-child:匹配父元素的第一个子元素
      • E:link:匹配所有未被点击的链接
      • E:visited:匹配所有已被点击的链接
      • E:active:匹配鼠标已经其上按下、还没有释放的E元素
      • E:hover:匹配鼠标悬停其上的E元素
      • E:focus:匹配获得当前焦点的E元素
      • E:lang(c):匹配lang属性等于c的E元素
    • 5.3 CSS 3:用户界面有关伪类
      • E:enabled:匹配表单中激活的元素
      • E:disabled:匹配表单中禁用的元素
      • E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
      • E::selection:匹配用户当前选中的元素
    • 5.4 CSS 3:结构性伪类
      • E:root:匹配文档的根元素,对于HTML文档,就是HTML元素
      • E:nth-child(n):匹配其父元素的第n个子元素,第一个编号为1
      • E:nth-last-child(n):匹配其父元素的倒数第n个子元素,第一个编号为1
      • E:nth-of-type(n):与:nth-child()作用类似,但是仅匹配使用同种标签的元素
      • E:nth-last-of-type(n):与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
      • E:last-child:匹配父元素的最后一个子元素,等同于:nth-last-child(1)
      • E:first-of-type:匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
      • E:last-of-type:匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
      • E:only-child:匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
      • E:only-of-type:匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
      • E:empty:匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
    • 5.5 CSS 3:反选伪类
      • E:not(s):匹配不符合当前选择器的任何元素
    • 5.6 CSS 3:target 伪类
      • E:target:匹配文档中特定"id"点击后的效果
  • 6、参考:
    • CSS选择器笔记 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
    • CSS 选择器参考手册 http://www.w3school.com.cn/cssref/css_selectors.asp
  • 7、结束。

【CSS选择器】理解汇总和记录的更多相关文章

  1. CSS选择器大汇总

    CSS选择器是学习CSS以及Web编程的基础. 整理出常用的CSS选择器,供自己和大家一起学习. 基本选择器 * /*通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)*/ #id /*id ...

  2. 看这一篇就够了,css选择器知识汇总

    对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...

  3. 前端--关于css选择器

    css选择器就好像表达式一样,返回一组或者一个html元素,后面的样式声明块应用到返回的元素上.所以可以把css选择器理解为某个或者某一类html元素的抽象的写法. 在讲具体的各种选择器之前要提一下选 ...

  4. 这 30 类 CSS 选择器,你必须理解!

    CSS 选择器是一种模式,用于选择需要添加样式的元素.平时使用最多也是最简单的就是 #id..class 和标签选择器,在 CSS 中还有很多更加强大更加灵活的选择方式,尤其是在 CSS3 中,增加了 ...

  5. CSS选择器有哪几种?举例轻松理解CSS选择器

    CSS选择器汇总(清爽版) 1.元素选择器 标签名{ } 2.id选择器 #id属性值{ } 3.类选择器 ·class属性值{ } 4.选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对 ...

  6. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  7. CSS 选择器汇总

    CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS ...

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

随机推荐

  1. https://github.com/CocoaPods/CocoaPods/search?q=No+such+file+or+directory报错解决方式

    ――― MARKDOWN TEMPLATE ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― ### Command ``` /U ...

  2. 在CentOS7系统上执行Scala脚本

    在类Unix系统上,可以在scala文件中开头第一行指定脚本的解释程序.如下例: Script.scala #!/usr/bin/env scala println("Hello" ...

  3. ThinkPHP分页实例

    ThinkPHP分页实例 (2014-09-20 15:34:36)   很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看. ...

  4. 【问题记录】shiro logout UnknownSessionException

    问题描述:web项目中使用shiro做登录权限控制,当shiro执行logout后,直接返回一个jsp路径会抛出org.apache.shiro.session.UnknownSessionExcep ...

  5. linux常用命令系列

    自己开始接触linux系统已经两年了,刚到现场进行系统维护的时候,只知道ls和cd命令,所以我被迫开始学习linux,虽然现在每天都在linux系统上进行一些操作,但是感觉自己半路出家一样:可能知道某 ...

  6. python - __str__ 和 __repr__

    内建函数str()和repr() (representation,表达,表示)或反引号操作符(``)可以方便地以字符串的方式获取对象的内容.类型.数值属性等信息.str()函数得到的字符串可读性好(故 ...

  7. 如何将自己的网站分享到QQ空间,微信,微博等等。

    逛一些网站的时候经常会看到右侧挂个分享栏,让用户把自己的站分享到qq空间,微信等等,所以自己也研究了下,把他加到了自己的网站上,喜欢的可以先看看效果:去转盘网,不多说了,直接上代码: window._ ...

  8. hdu6059 Kanade's trio 字典树+容斥

    转自:http://blog.csdn.net/dormousenone/article/details/76570172 /** 题目:hdu6059 Kanade's trio 链接:http:/ ...

  9. 13 jsp include

    假如您有一系列的页面, 每一个都拥有同样的导航栏, 联系信息和注脚, 好的解决方案是使用 jsp:include, 它可以将下面列出的任何内容插入到jsp的输出中: html 页面内容 纯文本文档的内 ...

  10. Android插件化开发之OpenAtlas生成插件信息列表

    上一篇文章.[Android插件化开发之Atlas初体验]( http://blog.csdn.net/sbsujjbcy/article/details/47446733),简单的介绍了使用Atla ...