基础选择器

TIP

本章节来学习下CSS3的一些选择器

基础选择器

名称	示例	说明
通配符选择器	* { }
元素选择器	body { }
类选择器	.list { }
ID选择器	#list { }
后代选择器	.list li { }
子元素选择器，直接后代选择器	#wrap > .inner { }	只能匹配到直接后代，不能匹配到深层次的后代元素
相邻兄弟选择器	#wrap #first + .inner { }	只会匹配紧跟着的兄弟元素
通用兄弟选择器	#wrap #first ~ div { }	会匹配所有的兄弟元素(不需要紧跟)
分组选择器	h1,h2,h3{ }	以逗号分隔，逗号我们称之为结合符

属性选择器

名称	说明
E[attr]	匹配具有attr属性的E元素
E[attr="val"]	匹配具有attr属性、且属性值等于val的E元素
E[attr^="val"]	匹配具有attr属性、且值以val开头的E元素
E[attr$="val"]	匹配具有attr属性、且值以val结尾的E元素
E[attr*="val"]	匹配具有attr属性、且值中含有val的E元素
E[attr~="val"]	匹配具有attr属性、且值中有以空格分隔、至少有一个值val的E元素
E[attr\|="val"]	匹配具有attr属性、且值是val或val-开头的E元素

<button>按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<div class="testtt">图标1</div>
<div class="absicon">图标1</div>
<div class="iicon3">图标4</div>
<div class="iicon4">图标5</div>
<div class="icon1 ic">图标1</div>
<div class="icon2-icon3">图标2</div>

/* 属性选择器的权重是 10 */
button {
	cursor: pointer;
}

/* 1. E[attr] 直接写属性 */
button[disabled] {
	cursor: default;
}

/* 2. E[attr="val"] 属性等于值 */
input[type="search"] {
	color: pink;
}

/* 3. E[attr^="val"] 以某个值开头的 属性值 */
div[class^="test"] {
	color: red;
}

/* 4. E[attr$="val"] 以某个值结尾的 */
div[class$="icon"] {
	color: green;
}

/* 5. E[attr*="val"] 可以在任意位置的 */
div[class*="iicon"] {
	color: blue;
} 

/* 6. E[attr~=val] 有空格分隔 */
div[class~="icon1"] {
	color: skyblue;
}

/* 7. E[attr|=val] val或者val-开头的 */
div[class|="icon2"] {
	color: yellow;
}

结构性伪类选择器

名称	说明
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中第n个子元素E
E:only-child	匹配父元素中只有唯一子元素的单个E元素
E:first-of-type	匹配指定类型E的第一个
E:last-of-type	匹配指定类型E的最后一个
E:nth-of-type(n)	匹配指定类型E的第n个
E:only-of-type	匹配父元素中只有唯一子元素E的所有E元素

示例1

<ul>
	<li>1</li>
	<li>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</li>
</ul>

 ul li:first-child {
	background-color: pink;
}

ul li:last-child {
	background-color: deeppink;
}

ul li:nth-child(8) {
	background-color: lightpink;
}

示例2

 <div>
	<p>我是p</p>
	<span>我是span</span>
	<span>我是span</span>
	<span>我是span</span>
</div>

div span:first-of-type {
	background-color: purple;
}

div span:last-of-type {
	background-color: skyblue;
}

div span:nth-of-type(2) {
	background-color: red;
}

示例3：nth-child(n)

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个，n从1开始计数
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ...
n+5	从第5个开始(包含第5个)到最后
-n+5	前5个(包含第5个)

/* 偶数 */
ul li:nth-child(even) {
	background-color: aquamarine;
}

/* 奇数 */
ul li:nth-child(odd) {
	background-color: blueviolet;
}

/*n 是公式，从 0 开始计算 */
ul li:nth-child(n) {
	background-color: lightcoral;
}

/* 偶数 */
ul li:nth-child(2n) {
	background-color: lightskyblue;
}

/* 奇数 */
ul li:nth-child(2n + 1) {
	background-color: lightsalmon;
}

/* 选择第 0 5 10 15, 0会忽略 */
ul li:nth-child(5n) {
	background-color: orangered;
}

/* n + 5 就是从第5个开始往后选择 */
ul li:nth-child(n + 5) {
	background-color: peru;
}

/* -n + 5 前五个 */
ul li:nth-child(-n + 5) {
	background-color: tan;
}

总结：

:nth-child(n) 选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
:nth-of-type(n) 选择指定类型的元素
:only-child 父元素中只有一个子元素，只匹配一个
:only-of-type 父元素中只有一个子元素，匹配满足条件的全部

伪元素

名称	说明
::before	在元素内容的前面插入内容
::after	在元素内容的后面插入内容
::firstLetter	向文本的第一个字母添加特殊样式
::firstLine	向文本的首行添加特殊样式

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1

注意：link，:visited，:target是作用于链接元素的！

名称	说明
:link	表示作为超链接，并指向一个未访问的地址的所有锚
:visited	表示作为超链接，并指向一个已访问的地址的所有锚
:target	代表一个特殊的元素，它的id是URI的片段标识符

动态伪类

注意：hover，:active基本可以作用于所有的元素！

名称	说明
:hover	表示悬浮到元素上
:active	表示匹配被用户激活的元素(点击按住时)

表单相关伪类

名称	说明
:enabled	匹配可编辑的表单
:disable	匹配被禁用的表单
:checked	匹配被选中的表单
:focus	匹配获焦的表单

结构性伪类

名称	说明
:enabled	匹配可编辑的表单
:disable	匹配被禁用的表单
:checked	匹配被选中的表单
:focus	匹配获焦的表单

# 基础选择器

# 基础选择器

# 属性选择器

# 结构性伪类选择器

# 示例1

# 示例2

# 示例3：nth-child(n)

# 伪元素

# 动态伪类

# 表单相关伪类

# 结构性伪类

# css声明的优先级

基础选择器

基础选择器

属性选择器

结构性伪类选择器

示例1

示例2

示例3：nth-child(n)

伪元素

动态伪类

表单相关伪类

结构性伪类

css声明的优先级