1. // css 读取顺序从右到左,符合要求的都会匹配
  2. // 通配符选择器 -- 选择所有元素
  3. *
  4. // 通配符选择器 -- 选择某个元素下的所有元素
  5. .demo *
  6. // 元素选择器
  7. html,body,p,div等等
  8. // 类选择器 -- 使用类选择器之前需要在html元素上定义类名
  9. .className
  10. // 类选择器还可以结合元素选择器 -- 匹配类同时匹配元素
  11. p.items
  12. // 多类选择器 -- 注意,有一个不存在将无法找到该元素 -- ie6不支持
  13. .important.items
  14. // id 选择器 -- 1.全局唯一 2.一个元素只能命名一个id
  15. #id
  16. // 后代选择器 -- 选择E元素的后代元素F(不管儿子还是孙子)
  17. E F
  18. // 子元素选择器 -- ie6不支持
  19. E > F
  20. // 相邻兄弟元素选择器 -- 同级目录且 E 后边紧邻的 F(不含 E)
  21. E + F
  22. // 通用兄弟选择器 -- CSS3增加,同级目录下 E 后边所有 F(不含 E) -- ie6不支持
  23. E ~ F
  24. // 群组选择器(逗号隔开不同规则)
  25. .first, .last
  26. // 所有父元素下第一个元素(以 body 作为根父节点)
  27. :first-child
  28. // 父元素下第一个且为 p 的元素
  29. p:first-child
  30. // 父元素下第二个且为 p 的元素
  31. p:nth-child(2)
  32. // 同上,从最后一个子元素开始计数
  33. p:nth-last-child(2)
  34. // 父元素最后一个且为 p 的元素
  35. p:last-child
  36. // 父元素下第二个 p 元素
  37. p:nth-of-type(2)
  38. // 同上,但是从最后一个子元素开始计数
  39. p:nth-last-of-type(2)
  40. // 父元素最后一个 p 元素
  41. p:last-of-type
  42. // 与子元素选择器组合 -- 只匹配 E 元素子目录下且最后位置为 p 的元素
  43. E > p:last-child
  44. // 与后代选择器组合 -- 匹配 E 元素子目录、子子目录里且最后位置为 p 的元素
  45. E p:last-child
  46. // 选择其 src 属性值以 "https" 开头的每个 <a> 元素
  47. a[src^="https"]
  48. // 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
  49. a[src$=".pdf"]
  50. // 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
  51. a[src*="abc"]

参考:

http://www.w3school.com.cn/cssref/css_selectors.ASP

http://www.w3cplus.com/css3/basic-selectors

https://www.zybuluo.com/Rico/note/19592

http://blog.jayself.com/2014/04/26/css3_selectors/

常用 CSS 选择器的更多相关文章

  1. 30个最常用css选择器解析(zz)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

  2. 30个最常用css选择器解析

    转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...

  3. 常用css选择器以及选择器的权重值介绍

    一.选择器的权重值 选择器权重值比较: !important infinity   无穷大 行间样式                   1000 id                        ...

  4. 兼容IE8及以上的常用css选择器

    p~ul//位于p元素后边的ul div>p div+p//紧接在 <div> 元素之后的所有 <p> 元素 [attribute]//[target]选择带有 targ ...

  5. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  6. XPath语法和CSS选择器介绍

    XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...

  7. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  8. CSS选择器命名及常用命名

    CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”, ...

  9. css3种引入方式,样式与长度颜色,常用样式,css选择器

    # CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...

随机推荐

  1. 彻底弄清楚session是什么?

    搬运自博主xueqinna的CSDN博客,根据自己的理解修改了部分内容,介意者请前往原博主博客看原文. 今天就来彻底的学一下session是个啥,作者罗列了几个要点:1.session 是啥?2.怎么 ...

  2. Qt Quick编程(1)

    说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...

  3. 一些诗词摘抄qwq

    声明: 有些违规内容就删掉了--大家都能理解吧qwq 雾失楼台,月迷津渡,桃源望断无寻处.可堪孤馆闭春寒,杜鹃声里斜阳暮.--秦观<踏莎行·郴州旅舍> 郴江幸自绕郴山,为谁流下潇湘去?-- ...

  4. 使用阿里云对象存储OSS上传图片工具类

    package com.verse.hades.utils; import com.aliyun.oss.OSSClient; import com.aliyun.oss.common.auth.Cr ...

  5. Git学习总结(12)——多人开发 Git 分支管理详解

    1.前言 在上一篇博客中我们主要讲解了Git 远程仓库,相信大家对远程的Git仓库有一定的了解,嘿嘿.在这一篇博客中我们来在大家讲解一下Git 分支管理,这可以说是Git的又一大特点.下面我们就来学习 ...

  6. 服务器监控(包括性能指标与web应用程序)

    http://blog.csdn.net/yao123long/article/details/53142029 http://blog.csdn.net/heyongluoyao8/article/ ...

  7. IOS - 查找未使用的图片

    实现细节都在代码里面, 帮助 -h. # -*- coding: utf-8 -*- """ 检查IOS应用图片是否使用 1. 读取有效文件: 图片(.png, .jpg ...

  8. 卷积神经网络(CNN)基础介绍

    本文是对卷积神经网络的基础进行介绍,主要内容包含卷积神经网络概念.卷积神经网络结构.卷积神经网络求解.卷积神经网络LeNet-5结构分析.卷积神经网络注意事项. 一.卷积神经网络概念 上世纪60年代. ...

  9. 单片机显示原理(LCD1602)

    一.接口 LCD1602是很多单片机爱好者较早接触的字符型液晶显示器,它的主控芯片是HD44780或者其它兼容芯片.与此相仿的是LCD12864液晶显示器,它是一种图形点阵显示器,能显示的内容比LCD ...

  10. 项目PMO工作

     算起来.这是第一次以项目PMO人员的身份參与项目,尽管非常可惜没有从头參与,也没有參与到项目结束,仅仅有短短的两个月.但对项目PMO也可略窥一斑.如今就当个流水账写一写吧. 进项目组的时候,是中 ...