选择器分类
简单选择器: 针对某一特征判断是否选中元素.
复合选择器: 连续的简单选择器, 根据元素特征判断是否选中单个元素.
复杂选择器: 由 "(空格)" ">" "~" "+" "||" 等符号连接的复合选择器, 根据父元素或者前序元素检查单个元素.
选择器类别: 用逗号分隔的复杂选择器, 表示 "或".
简单选择器
简单选择器分类:
类型选择器
全体选择器
id 选择器
class 选择器
属性选择器
伪类选择器
伪元素选择器
类型选择器
根据标签名来选中元素.
div{ }
全体选择器
"*" 可以选中任意元素.
*{ }
id 选择器
"#" 后面跟 id 名.
#myid{ }
class 选择器
"." 后面跟 class 名 c 一个元素可以拥有多个类. 下例中 ".a" ".b" ".c" 都可以选中 div 标签.
- <div class="a b c">
- </div>
- .a{ }
属性选择器
第一种,[att]: 选中带有 att 属性的元素
- <input type="text" />
- [type]{ }
第二种,[att=val]: 选中 att 属性值为 val 的元素
- <input type="text" />
- [type=text]{ }
第三种,[att~=val]: 选中属性 att 的值中包含指定词汇的元素
- <img src="" title="img1 img2" />
- [type~=img1]{ }
第四种,[att|=val]: 选中属性 att 值以 val 开头的元素, val 必须为整个单词
- <p lang="en-us">
- Hello World!
- </p>
- [type|=en]{ }
第五种,[att^=val]: 选中属性 att 值以 val 开头的元素
- <input type="text" />
- [type^=te]{ }
第六种,[att$=val]: 选中属性 att 值以 val 结束的元素
- <input type="text" />
- [type^=xt]{ }
第七种,[att*=val]: 选中属性 att 值包含 val 的元素
- <input type="text" />
- [type*=ex]{ }
属性选择器中 val 可能包含特殊字符, 所以可以使用单双引号包裹起来规避特殊字符, 也可以使用反斜杠转义.
伪类选择器
伪类选择器是一系列由 CSS 规定好的选择器, 它们以冒号开头. 伪类选择器有普通型和函数型两种.
树结构关系伪类选择器
:root 表示树的根元素, html 文档中根元素为 HTML 标签.
:empty 表示没有子节点的元素, 拥有空白文本也不能被选中.
:nth-child 和: nth-last-child,nth-child 规则如下. nth-last-child 为从后向前.
:first-child 和: last-child 分别表示第一个和最后一个元素.
:only-child 表示唯一子元素
S:nth-of-type 和 S:nth-last-of-type 表示只从 S 只选中.(of-type 系列同理)
- <div>
- <p>1</p>
- <a>2</a>
- <p>3</p>
- <p>4</p>
- </div>
- div p:nth-child(1){
- // 选中 1
- }
- div p:nth-child(2){
- // 没有选中
- }
- div p:nth-of-type(2){
- // 选中 3
- }
:first-of-type 和: last-of-type
- <div>
- <p>1</p>
- <a>2</a>
- <p>3</p>
- <p>4</p>
- </div>
- div p:first-child{
- // 选中 1
- }
- div a:first-child{
- // 没有选中
- }
- div a:first-of-type{
- // 选中 2
- }
- :only-of-type
- <div>
- <p>1</p>
- <a>2</a>
- </div>
- div p:only-child{
- // 没有选中
- }
- div p:only-of-type{
- // 选中 p
- }
链接与行为伪类选择器
:any-link 表示任意的链接, 包括 a,area 和 link 标签都可能匹配到这个伪类.
:link 表示未访问过的链接, :visited 表示已经访问过的链接.
:hover 表示鼠标悬停在上的元素.
:active 表示用户正在激活这个元素, 如用户按下按钮, 鼠标还未抬起时, 这个按钮就处于激活状态.
:focus 表示焦点落在这个元素之上.
:target 用于选中浏览器 URL 的 hash 部分所指示的元素.
逻辑伪类选择器
:not 目前只支持简单选择器
- <div>
- <p class="p1">1</p>
- <p>2</p>
- </div>
- div p:not(.p1){
- // 选中 2
- }
伪元素选择器
伪元素选择器选中的是不存在的元素. 常用的伪元素选择器有以下几种.
first-line 选用元素的第一行
first-letter 选中元素的第一个字母
before
after
first-line 必须出现在最内层的块级元素之内. 所以下例代码中第一行为蓝色.
- <div>
- <p id=a>First paragraph</p>
- <p>Second paragraph</p>
- </div>
- div>p#a {
- color:green;
- }
- div::first-line {
- color:blue;
- }
span 标签为行级元素, 所以伪元素在 span 之外, 第一行为绿色.
- <div>
- <span id=a>First paragraph</span>
- <span>Second paragraph</span>
- </div>
- div>span#a {
- color:green;
- }
- div::first-line {
- color:blue;
- }
::first-letter 的行为又有所不同, 它的位置在所有标签之内. 我们把前面的代码换成::first-letter, 首字母为蓝色.
- <div>
- <span id=a>First paragraph</span>
- <span>Second paragraph</span>
- </div>
- div>span#a {
- color:green;
- }
- div::first-letter {
- color:blue;
- }
::before 表示在元素内容之前插入一个虚拟的元素,::after 则表示在元素内容之后插入. 这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效, 我们看下例子:
- <p class="hi">hellow world!</p>
- p.hi::before {
- display: block;
- content: "hi!";
- }
来源: http://www.jianshu.com/p/4123ca868fdc