选择器主要是用来确定html的树形结构中的DOM元素节点。
我们把CSS选择器分开成四部分来介绍:
基本选择器 | 多元素的组合选择器 | 属性选择器 | 伪类选择器 |
---|---|---|---|
part1:基本选择器
选择器 | 含义 |
---|---|
* | 通用元素选择器,匹配任何元素 |
E | 标签选择器,匹配所有使用E标签的元素 |
.className | 类选择器 |
#ID | id选择器 |
补充:
选择器 | 含义 |
---|---|
.className1.className2 | 多类选择器(ie6不支持) |
- 例子1:类选择器结合元素选择器
1 | p.items {color: red;} //匹配 p元素并且是其有一个类名叫“items” |
- 例子2:多类选择器
1 | .info.items {background:#ccc;} //选择器只对元素中同时包含了"info"和"items"两个类才能起作用 |
part2:多元素的组合选择器
选择器 | 含义 |
---|---|
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 |
E F | 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔(所有后代元素) |
E > F | 子元素选择器,匹配所有E元素的子元素F(仅仅是子元素) |
E + F | 相邻兄弟元素选择器(相同的父元素),匹配所有紧随E元素之后的同级元素F |
E ~ F | 通用兄弟元素选择器,选择某元素后面的所有兄弟元素(注意是兄弟元素) |
demo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<ul>
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>
10
<p>我是p元素</p>
</li>
</ul>例子:E + F
1 | li + li {background: green;} //选中2到10 |
- 例子:E ~ F
1 | .active ~ li {color: red;} //选中3到10,p不会被选中 |
part3:属性选择器
选择器 | 含义 |
---|---|
E[att] | 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如”[cheacked]”。以下同。) |
E[att=val] | 匹配所有att属性等于”val”的E元素 |
E[att~=val] | 匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E元素 |
E[att^=”val”] | 属性att的值以”val”开头的元素 |
E[att$=”val”] | 属性att的值以”val”结尾的元素 |
E[att*=”val”] | 属性att的值包含”val”字符串的元素 |
E[att I=val] | 特定属性选择器,匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以”val”开头的E元素,主要用于lang属性,比如”en”、”en-us”、”en-gb”等等 |
demo
1
2
3
4
5
6
7<div class="demo">
<a href="" class="" id="one" lang="zh-cn">1</a>
<a href="http://git.linghit.com:666" class="" target="_blank">2</a>
<a href="https://www.baidu.com" class="" title="hey man hello">3</a>
<a href="" class="item4 info" lang="en-zh">4</a>
<a href="" class="" id="five">5</a>
</div>例子1:E[att] (单一属性的使用、多属性进行选择元素)
1 | .demo a[id] {color:red;} //选中1和5 |
- 例子2:E[att=val]
1 | .demo a[id="one"] {color:blue;} // 选中1 |
ps注意点:属性和属性值必须完全匹配
1 | .demo a[class="item4"]{color: red}; //无法匹配到4 |
- 例子3:E[att~=val],属性有多个值(空格隔开)是只需匹配到其中一个即可选中
1 | //例子2中无法匹配到4,用下面这个就可以 |
- 例子4:E[attr^=”value”]、E[att$=”val”]、E[att*=”val”]
1 | .demo a[href^="http://"]{background:orange;} //选中2 |
- 例子5:E[attr|=”value”],这个选择器会选择attr属性值等于value或以value-开头的所有元素
1 | .demo a[lang|="zh"]{background:yellow;} //选中1 |
比如说你页面中有很多图片,图片文件名都是以”figure-1”,”figure-2”这样的方式来命名的,那么使用这种选择器选中图片就很方便
part4:伪类选择器
选择器 | 含义 |
---|---|
E:lang(c) | 匹配lang属性等于c的E元素 |
(1) 动态伪类
选择器 | 含义 |
---|---|
E:link | 匹配所有未被点击的链接 |
E:visited | 匹配所有已被点击的链接 |
E:active | 用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了) |
E:hover | 匹配鼠标悬停其上的E元素 |
E:focus | 匹配获得当前焦点的E元素 |
(2)UI元素状态伪类(主要用于Form元素)
选择器 | 含义 |
---|---|
E:enabled | 匹配表单中激活的元素 |
E:disabled | 匹配表单中禁用的元素 |
E:checked | 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 |
E::selection | 匹配用户当前选中的元素 |
- “type=”text”有enable和disabled两种状态,前者为可写状态后者为不可状态;
- type =”radio”和”type=”checkbox””有”checked”和”unchecked”两种状态。
1 | input[type="text"]:disabled { background:#ddd; } |
(3)结构性伪类
选择器 | 含义 |
---|---|
E:first-child | 选择某个元素的第一个子元素 |
E:last-child | 选择某个元素的最后一个子元素 |
E:nth-child() | 选择某个元素的一个或多个特定的子元素 |
E:nth-last-child() | 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算 |
E:nth-of-type() | 选择指定的元素 |
E:nth-last-of-type() | 选择指定的元素,从元素的最后一个开始计算 |
E:first-of-type | 选择一个上级元素下的第一个同类子元素 |
E:last-of-type | 选择一个上级元素的最后一个同类子元素 |
E:only-child | 选择的元素是它的父元素的唯一一个了元素 |
E:only-of-type | 选择一个元素是它的上级元素的唯一一个相同类型的子元素 |
E:empty | 选择的元素里面没有任何内容 |
1 | p:nth-child(3) { color:#f00; } |
(4)伪元素
选择器 | 含义 |
---|---|
E:first-line | 匹配E元素的第一行 |
E:first-letter | 匹配E元素的第一个字母 |
E:before | 在E元素之前插入生成的内容 |
E:after | 在E元素之后插入生成的内容 |
1 | p:first-line { font-weight:bold; color;#600; } |
伪类选择器内容有待继续更进…