常用 CSS 选择器
// 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 选择器的更多相关文章
- 30个最常用css选择器解析(zz)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- 30个最常用css选择器解析
转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...
- 常用css选择器以及选择器的权重值介绍
一.选择器的权重值 选择器权重值比较: !important infinity 无穷大 行间样式 1000 id ...
- 兼容IE8及以上的常用css选择器
p~ul//位于p元素后边的ul div>p div+p//紧接在 <div> 元素之后的所有 <p> 元素 [attribute]//[target]选择带有 targ ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- XPath语法和CSS选择器介绍
XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...
- selenium元素定位之css选择器
在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...
- CSS选择器命名及常用命名
CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”, ...
- css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...
随机推荐
- 08.Web服务器-4.Web服务器动态资源请求
1 浏览器请求动态页面过程 2 WSGI 怎么在你刚建立的Web服务器上运行一个Django应用和Flask应用,如何不做任何改变而适应不同的web架构呢? 在以前,选择 Python web 架构会 ...
- elementUI 时间选择器,时间选择快捷键
elementUI的时间快捷键,使用属性:picker-options="pickerOptions",由于pickerOptions的定义很长,也在其他地方共用,因此建议提取出来 ...
- C#中三种弹出信息窗口的方式
弹出信息框,是浏览器客户端的事件.服务器没有弹出信息框的功能. 方法一: asp.net页面如果需要弹出信息框,则需要在前台页面上注册一个javascript脚本,使用alert方法.使用Client ...
- 【[Offer收割]编程练习赛15 B】分数调查
[题目链接]:http://hihocoder.com/problemset/problem/1515 [题意] [题解] 带权并查集 relation[x]表示父亲节点比当前节点大多少; 对于输入的 ...
- Netty学习总结(2)——Netty的高性能架构之道
Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...
- 洛谷 P3227 BZOJ 3144 [HNOI2013]切糕
题目描述 经过千辛万苦小 A 得到了一块切糕,切糕的形状是长方体,小 A 打算拦腰将切糕切成两半分给小 B.出于美观考虑,小 A 希望切面能尽量光滑且和谐.于是她找到你,希望你能帮她找出最好的切割方案 ...
- C#--async-await的用法
NET 中的 async/await 异步编程 MSDN上的文章 **async与await最佳实践 需要先理解thread的用法,再掌握task的用法,才能力理解async和await的用法 usi ...
- COGS——C610. 数对的个数
http://cogs.pro/cogs/problem/problem.php?pid=610 Description出题是一件痛苦的事情!题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的A+B P ...
- ZOJ 3494
超级神奇有趣题. AC自动机+数位DP.其实,数位DP在处理含有某些数字时特别不好处理,应该把它倒转为求不含有.这道题把数位DP+AC自动机结合起来,实在是很巧妙,把数字变为串来处理,强大! 要使用A ...
- codechef Little Elephant and Bombs题解
The Little Elephant from the Zoo of Lviv currently is on the military mission. There are N enemy bui ...