CSS选择器
基本选择器
| 选择器 | 名称 | 说明 | CSS版本 |
|---|---|---|---|
* |
通用选择器 | 选择所有元素 | 2 |
#<id> |
id选择器 | 选择指定id属性的元素 | 1 |
.<class> |
class选择器 | 选择指定class属性的元素 | 1 |
<type> |
元素选择器 | 选择指定类型的元素 | 1 |
[attr] |
属性选择器 | 选择指定attr属性的元素 | 2~3 |
1. 通用选择器
* 选择器匹配所有 html 元素（包括<html> 和<body>标签）。
* {
border: 1px solid red;
}
2. ID选择器
通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。
<p id="abc">
段落
</p>
#abc {
font-size: 20px;
}
3. 类选择器
通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。
<b class="abc">加粗</b>
<span class="abc">无</span>
.abc {
border: 1px solid red;
}
使用元素.class的形式，限定某种类型的元素。
b.abc {
border: 1px solid red;
}
4. 元素选择器
直接使用元素名称作为选择器名。
<p>
段落
</p>
p {
color: tansparent;
}
5. 属性选择器
属性选择器，直接通过两个中括号里面包含属性名即可。
/**所需 CSS2 版本**/
[type] {
border: 1px solid #ddd;
}
匹配属性值的属性选择器。
/**所需 CSS2 版本**/
[type="password"] {
border: 1px solid #ddd;
}
属性值开头匹配的属性选择器。
/**所需版本 CSS3 **/
[href^="http"] {
color: orange;
}
属性值结尾匹配的属性选择器。
/**所需版本 CSS3**/
[href$=".com"] {
color: orange;
}
属性值包含指定字符的属性选择器。
/**所需版本 CSS3 **/
[href*="baidu"] {
color: orange;
}
属性值具有多个值时，匹配具有其中一个值的属性选择器。
/**所需版本 CSS2**/
[class~="edf"] {
font-size: 50px;
}
- 属性只包含匹配值的会被选择到。
- 属性包含多个值，含有匹配值的会被选择到。
属性值具有多个值且使用-号连接符分割的其中一个值的属性选择器。
比如：<i lang="en-us">HTML5</i>
/**所需版本 CSS2**/
[lang|="en"] {
color: red;
}
复合选择器
| 选择器 | 名称 | 说明 | CSS版本 |
|---|---|---|---|
s1,s2,s3... |
分组选择器 | 选择多个选择器的选择的元素 | 1 |
s1 s2 |
后代选择器 | 选择指定选择器的后代元素 | 1 |
s1 > s2 |
子选择器 | 选择指定选择器的子元素 | 2 |
s1 + s2 |
相邻兄弟选择器 | 选择指定选择器相邻的元素 | 2 |
s1 ~ s2 |
普通兄弟选择器 | 选择指定选择器后面的元素 | 3 |
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
1.分组选择器
将多个选择器通过逗号分割，同时设置一组样式。
p,b,i,span {
color: red;
}
不但可以分组元素选择器，还可以使用
ID选择器、类选择器、属性选择器混合使用。
2.后代选择器
后代选择器可以选择父元素向下所有被选择的元素，不在乎被选择元素的层次深度。
p b {
color: red;
}
选择
<p>元素内部所有<b>元素。不在乎<b>的层次深度后代选择器也可以混合使用
ID选择器、类选择器、属性选择器。
3.子选择器
子选择器只能选择父元素向下一级的元素，不可以再往下选择。
<ul>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
ul > li {
border: 1px solid red;
}
4.相邻兄弟选择器
相邻兄弟选择器匹配第一个元素后面相邻的指定元素（与第一个元素同级）。
<div>
<p class="test">第一个段落</p>
<div>第一个div</div>
<p>第二个段落</p>
<div>第二个div</div>
<p>第三个段落</p>
<div>第三个div</div>
</div>
.test + div {
color: red;
}
只有
第一个div字体颜色会变成红色
5.普通兄弟选择器
普通兄弟选择器匹配第一个元素后面所有的指定元素（与第一个元素同级）。
<div>
<p class="test">第一个段落</p>
<div>第一个div</div>
<p>第二个段落</p>
<div>第二个div</div>
<p>第三个段落</p>
<div>第三个div</div>
</div>
p ~ b {
color: red;
}
第一个div、第二个div、第三个div字体颜色都会变成红色。
伪元素选择器
| 选择器 | 名称 | 说明 | CSS版本 |
|---|---|---|---|
::first-line |
伪元素选择器 | 选择块级元素文本的首行 | 1 |
::first-letter |
伪元素选择器 | 选择块级元素文本的首字母 | 1 |
::before |
伪元素选择器 | 选择元素之前插入内容 | 2 |
::after |
伪元素选择器 | 选择元素之后插入内容 | 2 |
::selection |
伪元素选择器 | 当选择文字时触发 | 3 |
伪选择器分为两种：伪类选择器和伪元素选择器
这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）
个人理解：伪元素选择器选择的是文本内容，伪类选择器选择的是元素。
1.::first-line 块级首行
::first-line {
color: red;
}
块级元素比如
<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置
p::first-line
2.::first-letter 块级首字母
::first-letter {
color: red;
}
块级元素的首字母（中文为首个中文字符）
3.::before 文本前插入
a::before {
content: '点击-';
}
在文本前插入内容
4.::after 文本后插入
a::after {
content: '-请进';
}
在文本后插入内容
5.::selection
::selection{
color:red;
}
选择选择的文字
伪类选择器
| 选择器 | 名称 | 说明 | CSS版本 |
|---|---|---|---|
:root |
根元素选择器 | 选择文档中的根元素 | 3 |
:first-child |
子元素选择器 | 选择元素中第一个子元素 | 2 |
:last-child |
子元素选择器 | 选择元素中最后一个子元素 | 3 |
:nth-child(n) |
子元素选择器 | 选择指定N个子元素 | 3 |
:only-child |
子元素选择器 | 选择元素中唯一子元素 | 3 |
:only-of-type |
子元素选择器 | 选择指定类型的唯一子元素 | 3 |
nth-of-type(n) |
子元素选择器 | 选择指定N个子元素 | 3 |
:checked |
UI选择器 | 选择被选中input勾选元素 | 3 |
:enabled |
UI选择器 | 选择启用状态的元素 | 3 |
:disabled |
UI选择器 | 选择禁用状态的元素 | 3 |
:valid |
UI选择器 | 验证有效选择input元素 | 3 |
:invalid |
UI选择器 | 验证无效选择input元素 | 3 |
:required |
UI选择器 | 有required属性选择元素 | 3 |
:optional |
UI选择器 | 无required属性选择元素 | 3 |
:default |
UI选择器 | 选择默认元素 | 3 |
:link |
动态选择器 | 未访问的超链接元素 | 1 |
:hover |
动态选择器 | 悬停在超链接上的元素 | 2 |
:active |
动态选择器 | 激活超链接上的元素 | 2 |
:visited |
动态选择器 | 已访问的超链接元素 | 1 |
:foucs |
动态选择器 | 获取焦点的元素 | 2 |
:not |
其他选择器 | 否定选择的元素 | 3 |
:empty |
其他选择器 | 选择没有任何内容的元素 | 3 |
:target |
其他选择器 | 选取URL片段标识指向元素 | 3 |
:lang |
其他选择器 | 选取包含lang属性的元素 | 2 |
结构性伪类
结构性伪类选择器能够根据元素在文档中的位置选择元素。
1.根元素选择器
:root{
border:1px solid red;
}
匹配文档中的根元素，基本不怎么用，因为总是返回
<html>元素
2.子元素选择器
ul > li:first-child{
color:red;
}
选择
li元素，条件：li的父元素下第一个子元素是li的那个li元素
ul > li:last-child{
color:red;
}
选择
li元素，条件：li的父元素下最后一个子元素是li元素的那个li元素
以下html结构li:fist-child与li:last-child都将不会有li元素被选择到
<ul>
<p>首段内容</p>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<p>尾端内容</p>
</ul>
ul > li:nth-child(2){
color:red;
}
选择
li元素，条件：li的父元素下第二个子元素是li元素的那个li元素文本
第一个li的字体颜色将变为红色
/* 匹配奇数位元素 */
li:nth-of-child(odd)
/* 匹配偶数位元素 */
li:nth-of-child(even)
/* 匹配连续位置的元素 */
li:nth-of-child(an + b)
-
a表示周期的长度 -
n表示计数器（从0开始） -
b是偏移值
以下实例表示匹配第2、5、8、11位置的元素：
li:nth-of-child(3n + 2)
ul > li:nth-last-child(2){
color:red;
}
选择
li元素，条件：li的父元素下倒数第二个子元素是li元素的那个li元素文本
第三个li的字体颜色将变为红色
ul > li:only-child{
color:red;
}
选择
li元素，条件：li的父元素下仅有一个元素，且为li元素的那个li元素
以下html结构中，只有文本only child字体颜色会变为红色
<ul>
<li>only child</li>
</ul>
<ul>
<li>第一个子元素</li>
<li>第二个子元素</li>
</ul>
ul > li:only-of-type{
color:red;
}
选择
li元素，条件：li的父元素下仅有一个li类型元素；li的父元素下可以存在或不存在其它类型的元素。以下
html结构中，只有文本only-of-type的字体颜色会变成红色。
<ul>
<li>only of type</li>
</ul>
<ul>
<li>only of type</li>
<p>p元素</p>
</ul>
<ul>
<li>第一个li元素</li>
<li>第二个li元素</li>
</ul>
<ul>
<li>第一个li元素</li>
<li>第二个li元素</li>
<p>p元素</p>
<p>p元素</p>
</ul>
ul > li:nth-of-type(2){
color:red;
}
选择
li元素，条件：li的父元素下第二个元素是li元素的那个li元素。
第二个li元素字体颜色会变成红色
ul > li:nth-last-of-type(2){
color: red;
}
选择
li元素，条件：li的父元素下倒数第二个元素是li元素的那个li元素。
第一个li元素字体颜色会变成红色
UI伪类
UI伪类选择器是根据元素的状态匹配元素。
1.:checked
:checked{
display:none;
}
选择
checked属性值为true的input表单元素
2.:enabled和:disabled
:enabled {
border: 1px solid red;
}
选择启动状态的表单元素
:disabled {
border: 1px solid red;
}
选择禁用状态的表单元素
3.:valid和:invalid
input:valid {
border: 1px solid blue;
}
input:invalid {
border: 1px solid green;
}
选择输入验证合法与不合法的表单元素
4.:required
:required{
border:1px solid blue;
}
选择
require属性为true的表单元素
5.:optional
:optional {
border:1px solid red;
}
选择
select元素
6.:default
:default{
display:none;
}
从一组类似的元素中选择默认元素。比如input被勾选的即默认的。
动态伪类
动态伪类选择器根据条件的改变匹配元素。
1.:link
a:link{
color:blue;
}
:link表示未访问过的超链接
2.:hover
a:hove{
color:orange;
}
:hover表示鼠标悬停在超链接上
3.:active
a:active{
color:red;
}
:active表示鼠标按下激活超链接时
4.:visited
a:visited{
color:gray;
}
:visited表示已访问过的超链接
5.:focus
input:focus{
border:1px solid red;
}
:focus表示获得焦点时
其它伪类
1.:not
a:not([href*="baidu"]) {
color: red;
}
否定选择器，反选。
2.:empty
:empty {
display: none;
}
匹配没有任何内容的元素。
3.:target
:target {
color: red;
}
定位到锚点时，选择此元素。
以下
html元素，选择元素为div元素
<a href="#1">1</a>
<a href="#2">2</a>
<div id="1">1target</div>
<div id="2">2target</div>
4.:lang
:lang(en) {
color: red;
}
选择包含
lang属性，属性值前缀为en的元素。和属性选择器匹配结果一致。
