Kidney自得其乐版CSS教程 Chapter1 Selector_html/css_WEB-ITnose
Version | Update | Note |
1.0 | 2016-5-28 | 首次添加。欢迎在评论中指出错误，一经核实，立即修订，且注明贡献者。 |
图例：CSS3以前版本 CSS3中浏览器普遍支持的属性 CSS3中未被普遍支持的属性
1、元素选择器
1.1 *
通配符，表示所有元素
1.2 element
2、class和id
2.1 .className
2.2 #id
在单个文档中指定唯一的元素。
id可用于锚链接。例如：
点击click me，页面会跳转到锚链接的位置，并且文档的url后添加了#hi
file:///C:/Users/kidney/Desktop/demo.html#hi
此时div成为了目标元素，可以被div:target伪类选中。
3、关系选择器
3.1 E F
选择E后代中所有的F
3.2 E>F
选择E直接子代中所有的F
3.3 E~F
选择E兄弟元素中所有的F
3.4 E+F
选择紧跟E后面的兄弟元素F
4、属性选择器
4.1 selector[attrName]、selector[attrName = "value "]
这是基本格式。attrName可以是自定义属性。
4.2 ~=
选择属性值中包含指定value的元素，value指向一个完整的单词。~=表示"含有"。
4.3 *=
选择属性值中包含指定value的字符串的元素。
div[*= "a"] //有效
div[*= "ef"] //有效
4.4 ^=
选择属性值为以指定value开头字符串的元素。^=表示"以…开头"。
注意：只针对第一个属性值。例如：
div[name ^= "ab"] //有效
div[name ^= "de"] //无效
下同。
4.5 $=
选择属性值为以指定value结尾字符串的元素。$=表示"以…结尾"。
4.6 |=
选择属性值为以指定value开头且用-分隔的字符串的元素。
div[name |= "ab"] //有效
div[name |= "a"] //无效
div[name |= "de"] //无效
5、伪类选择器
5.1 子元素序列
E:first-child E:last-child E:nth-child(n) E:nth-last-child(n) E:only-child
E:first-of-type E:last-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:only-of-type
nth-child(n)中的n可以是正整数、关键字even（偶）和odd（奇）和含n表达式如2n、2n+1、3n-2等。n是以1、2、3 … 的方式递增的，如果计算出的值小于等于0，会被自动忽略。nth-last-child(n)只是从子元素序列倒着数，别无二致。
这里所谓子元素，仅仅是要求E必须具备父元素，从用法来看它们更像是兄弟元素的选择器。-child是这样解析的：首先在同级元素中找到第n个元素，然后看该元素是否与E相匹配。匹配，则选择成功，不匹配，则丢弃。-type解析的方式刚好相反，首先在同级元素中找到所有匹配E的元素，然后再在其中选择第n个。
:only-child的解析规则是如果E是父元素唯一的子元素，则匹配成功；:only-of-type的解析规则是E是父元素唯一的该类（element type）子元素，则匹配成功。
p:only-child //无效
p:only-of-type //有效
5.2 无后元素
:empty 选择没有后代（包括文本节点、 占位符以及空格）的空元素。
p:empty //无效，跨行表示有空格，空格也属于文本节点
5.3 超链接爱恨四君子
:link :visited :hover :active
分别代表a元素访问前、已访问、鼠标悬停和被点击时的状态。必须按此顺序设置，提取首字母，可简记为love&hate。
:hover被广泛运用在任何元素的悬停事件上。
5.4 表单状态
:focus 表示文本框获得输入光标事件。
:checked 表示单选按钮和复选框的选中事件。
:enabled 表示可用状态的表单元素。
:disabled 表示禁用状态的表单元素。
5.5 排除
E:not(S) 表示在E元素集中排除S选择器所匹配的元素后剩余的元素。
6、伪对象选择器（又称伪元素）
6.1 E::before E::after
CSS3中用双冒号以与伪类相区别，但也支持用单冒号。
before和after用于在E的内容前和内容后生成新的内容。
它们的用法早已超越了仅仅是在首尾添加文本内容，它们可以用来生成几乎任何新的html结构。
6.2 E::first-letter E::first-line
它们只适用于块级元素。
first-letter常用于设置传统印刷媒体中文本首字下沉效果。
6.3 E::selection
用于设置文本被选择时的样式。
6.4 E::input-placeholder E::placeholder
用于设置表单中占位文字的样式。需要加浏览器前缀。
只有火狐用placeholder，其它浏览器都用input-placeholder
7、选择器的层级
CCS全称是层叠样式表，其"层叠"就体现在选择器的优先级上，优先级高的覆盖优先级低的。优先级的高低依据的是"确切性、特殊性"（specification），具体遵循以下三个程序：
一、声明的来源
用户的重要声明>开发者的声明>用户的正常声明>浏览器的默认声明
二、在开发者的声明中通过累计权重值判断优先级
类型（从高到低） | 权重 | 说明 |
重要声明 | 无限大 | !important |
内联声明 | 1000 | style |
id选择器 | 100 | #id |
class、属性选择和伪类 | 10 |
|
元素和伪对象 | 1 |
|
通配符 | 0 |
|
继承 | 无 | 无比0还小 |
三、如果累计权重值一样，则按先后顺序确定优先级
1、内部样式表（
2、在同一份样式表中：后面的样式>前面的样式
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论