API文档:http://css.cuishifeng.cn/all.html

1. 通配选择符(*)

语法:

  * { sRules }

说明:

  通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用

兼容性:

  IE6及更早浏览器并不支持通配选择符(*),而是将它忽略了,所以也变相的能看到效果。

2. 类型选择符(E)

语法:

  E { sRules }

3. ID选择符(E#id)

语法:

  E#myid { sRules }

4. 类选择符(E.class)

语法:

  E.myclass { sRules }

说明:

  不同于ID选择符的唯一性,类选择符可以同时定义多个。

  .a.b { color: #f00; }

兼容性:

  IE6不支持多类选择符,形如:.a.b {}

5. 包含选择符(E F)

语法:

  E F { sRules }

说明:

  选择所有被E元素包含的F元素。

6. 子选择符(E>F)

语法:

  E>F { sRules }

说明:

  选择所有作为E元素的子元素F。

  与 包含选择符(E F) 不同的是,子选择符只能命中子元素,而不能命中孙辈。

<div class="demo">
  <div class="a">
    <div class="b">子选择符</div>
  </div>
</div>
.demo > div { position: relative; }
此例只有 .a 会被命中,因为它是 .demo 的子元素;

兼容性:

  IE6不支持

7. 相邻选择符(E+F)

语法:

  E+F { sRules }

说明:

  选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。

兼容性:

  IE6不支持

8. 兄弟选择符(E~F)

语法:

  E~F { sRules }

说明:

  选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。

  需要注意的是,选择的只是同级的元素F,后代中的元素F不会被选择。

兼容性:

  IE6不支持

9. E:link

语法:

  E:link { sRules }

说明:

  设置超链接a在未被访问前的样式。

  如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现。超链接的4种状态,需要有特定的书写顺序才能生效。

  a:link {} a:visited {} a:hover {} a:active {}

  注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后

  可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

兼容性:

  IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active。

10. E:focus

语法:

  E:focus { sRules }

说明:

  设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

  webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

兼容性:

  IE7及以下不兼容

11. E:first-child

语法:

  E:first-child { sRules }

说明:

  匹配父元素的第一个子元素E。

  要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

12. E[att]

语法:

  E[att] { sRules }

说明:

  选择具有att属性的E元素。

兼容性:

  IE6不兼容

13. E[att="val"]

语法:

  E[att="val"] { sRules }

说明:

  择具有att属性且属性值等于val的E元素。

兼容性:

  IE6不兼容

14. E[att~="val"]

语法:

  E[att~="val"] { sRules }

说明:

  选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

兼容性:

  IE6不兼容

15. E[att^="val"]

语法:

  E[att^="val"] { sRules }

说明:

  选择具有att属性且属性值为以val开头的字符串的E元素。

兼容性:

  IE6不兼容

16. E[att$="val"]

语法:

  E[att$="val"] { sRules }

说明:

  选择具有att属性且属性值为以val结尾的字符串的E元素。

兼容性:

  IE6不兼容

17. E[att*="val"]

语法:

  E[att*="val"] { sRules }

说明:

  选择具有att属性且属性值为包含val的字符串的E元素。

兼容性:

  IE6不兼容

18. E[att|="val"]

语法:

  E[att|="val"] { sRules }

说明:

  选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。

  这样理解会更简单:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。

兼容性:

  IE6不兼容

CSS中的选择器(一)的更多相关文章

  1. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  2. css中:not()选择器和jQuery中.not()方法

    因为老是将这两个的not方法弄混,所以写一下备忘. css中:not()选择器用法 :not 伪类选择器可以筛选不符合表达式的元素,:not(selector) 其中的selector为css选择器 ...

  3. CSS中的选择器(笔记)

    1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele): ...

  4. css中的选择器

    选择器            说明    *                通用元素选择器,匹配任何元素    E                标签选择器,匹配所有使用E标签(所有HTML元素)的元 ...

  5. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  6. css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  7. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  8. HTML5中class选择器属性的解释

    设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...

  9. 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

随机推荐

  1. 模版引擎Handlebars和Mustache

    Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; 下面这个是基本的模版表达式, ...

  2. 201871010126 王亚涛《面向对象程序设计 JAVA》 第十三周学习总结

      内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  3. Java之封装性

    封装概述 面向对象编程语言是对客观世界的模拟,客观世界里成员变量都是隐藏在对象内部的,外界无法直接操作和修改. 封装可以被认为是一个保护屏障,防止该类的代码和数据被其他类随意访问.要访问该类的数据,必 ...

  4. 利用 ROW_NUMBER() OVER ( ORDER BY 进行选择性排序,按不同字段进行排序处理,分页

    --就在OVER order by 中用case语句进行判断. IF ( OBJECT_ID('tempdb..#TempTable') IS NOT NULL ) DROP TABLE #TempT ...

  5. 2019.08.06模拟赛T2

    题目大意: 已知三个$n$位二进制数$A$,$B$,$C$. 满足: $A+B=C$ 它们二进制位中$1$的个数分别为$a$,$b$,$c$. 求满足条件的最小的$C$. Solution 唉,又是一 ...

  6. 新终端必须source /etc/profile的解决办法,同时解决变色问题

    Linux环境变量文件 /etc/profile:在登录时,操作系 统定制用户环境时使用的第一个文件 ,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. /etc /enviro ...

  7. 克隆系统后如何重新清除SID

    为什么要清除SID? SID(Security Identifiers,安全标识符)是Windows中标识用户.组和计算机的唯一的号码,Windows操作系统通过SID对计算机和用户进行识别.用户的权 ...

  8. Educational Codeforces Round 76 (Rated for Div. 2) C. Dominated Subarray 水题

    C. Dominated Subarray Let's call an array

  9. csrf攻击与csrf防御

    CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站 ...

  10. 用OC基于链表实现链队列

    一.简言 在前面已经用C++介绍过链队列的基本算法,可以去回顾一下https://www.cnblogs.com/XYQ-208910/p/11692065.html.少说多做,还是上手撸代码实践一下 ...