// css 读取顺序从右到左,符合要求的都会匹配
// 通配符选择器 -- 选择所有元素
*
// 通配符选择器 -- 选择某个元素下的所有元素
.demo *
// 元素选择器
html,body,p,div等等
// 类选择器 -- 使用类选择器之前需要在html元素上定义类名
.className
// 类选择器还可以结合元素选择器 -- 匹配类同时匹配元素
p.items
// 多类选择器 -- 注意,有一个不存在将无法找到该元素 -- ie6不支持
.important.items
// id 选择器 -- 1.全局唯一 2.一个元素只能命名一个id
#id
// 后代选择器 -- 选择E元素的后代元素F(不管儿子还是孙子)
E F
// 子元素选择器 -- ie6不支持
E > F
// 相邻兄弟元素选择器 -- 同级目录且 E 后边紧邻的 F(不含 E)
E + F
// 通用兄弟选择器 -- CSS3增加,同级目录下 E 后边所有 F(不含 E) -- ie6不支持
E ~ F
// 群组选择器(逗号隔开不同规则)
.first, .last // 所有父元素下第一个元素(以 body 作为根父节点)
:first-child
// 父元素下第一个且为 p 的元素
p:first-child
// 父元素下第二个且为 p 的元素
p:nth-child(2)
// 同上,从最后一个子元素开始计数
p:nth-last-child(2)
// 父元素最后一个且为 p 的元素
p:last-child
// 父元素下第二个 p 元素
p:nth-of-type(2)
// 同上,但是从最后一个子元素开始计数
p:nth-last-of-type(2)
// 父元素最后一个 p 元素
p:last-of-type
// 与子元素选择器组合 -- 只匹配 E 元素子目录下且最后位置为 p 的元素
E > p:last-child
// 与后代选择器组合 -- 匹配 E 元素子目录、子子目录里且最后位置为 p 的元素
E p:last-child // 选择其 src 属性值以 "https" 开头的每个 <a> 元素
a[src^="https"]
// 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
a[src$=".pdf"]
// 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
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. Linux系统下打印第n行的方法

    方法一:cat cat filename | head -n 5 | tail -n +5 方法二:sed sed -n '5p' filename 扩展:打印第3~5行 cat filename | ...

  2. iptables 实现内网转发上网

    介绍 通过iptables做nat转发实现所有内网服务器上网. 操作 首先开启可以上网的服务器上的内核路由转发功能.这里我们更改/etc/sysctl.conf 配置文件. [root@web1 /] ...

  3. windows 下关于nginx的操作

    在nginx安装目录下操作 1.启动:start nginx 2.停止:① nginx.exe -s stop ②nginx.exe -s quit   注:stop是快速停止nginx,可能并不保存 ...

  4. 1. 构建第一个SpringBoot工程

    1.File -  New - Module 2.选项的是Spring Initializr(官方的构建插件,需要联网) ,一定要选择jdk 3.填写项目基本信息 Group:组织ID,一般分为多个段 ...

  5. cxdbtreelist的处理点滴

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuAAAAE8CAIAAAAOqJOXAAAgAElEQVR4nOy9eXAcV37n+bwzf21sbO ...

  6. 洛谷 P2144 BZOJ 1003 [FJOI2007]轮状病毒

    题目描述 轮状病毒有很多变种.许多轮状病毒都是由一个轮状基产生.一个n轮状基由圆环上n个不同的基原子和圆心的一个核原子构成.2个原子之间的边表示这2个原子之间的信息通道,如图1. n轮状病毒的产生规律 ...

  7. python操作JIRA的库简单操作

    因公司需要,我们开发的PRISM又需要和JIRA对接啦, 今天找了一个JIRA库撸了一发~~~ jira库地址: https://pypi.python.org/pypi/jira/1.0.3 简单操 ...

  8. Spring深入理解(三)

    Spring 中 AOP 特性详解 动态代理的实现原理 要了解 Spring 的 AOP 就必须先了解动态代理的原理,因为 AOP 就是基于动态代理实现的.动态代理还要从 JDK 本身说起. 在 Jd ...

  9. 一次完整的http事务

    一次完整的http事务 https://www.processon.com/view/link/56c6679ce4b0f0c4285e69c0 规范把 HTTP 请求分为三个部分:状态行.请求头.消 ...

  10. macOS10.9+xcode6编译ffmpeg2.4.2 for ios

    近期须要用到ffmpeg开发视频相关.在网上找了些编译资源,自己摸索着,总算编译ok了. 因此,记录下苦逼的编译过程,已祭奠我为之逝去的青春. 1.准备工作 首先.到ffmpeg官网下载最新到代码. ...