CSS常用选择器总结

CSS基础选择器

1. element选择器

p{...}

		<p>选中我</p>

2. class选择器

.p{...}

<p class="p">选中我</p>

3. id选择器

#p{...}

<p id="p">选中我</p>

CSS组合选择器

1. E F 包含选择器（为E元素内部的所有F元素设置样式）

div span{...}

<div>
			<span>选中我</span>
</div>

2. E,F 选择器（为不同元素设置相同样式）

p,span{...}

<p>选中我</p>
<span>选中我</span>

3. E>F 子包含选择器（F为E元素的直接子元素）

div>span{...}

<div>
			<span>选中我</span>
			<p><span>不选中我</span></p>
</div>

4. E+F 相邻兄弟选择器

p+span{...}

<p>...</p>
<span>选中我</span>

5. E~F 普通兄弟选择器

p~span{...}

<p>...</p>
<span>选中我</span>
<span>选中我</span>

伪类选择器

1. E:link 链接伪类选择器 （选择被定义了超链接的E元素，且未被访问）

a:link {...}

<a href="#">...</a>

2. E:visited 链接伪类选择器 （选择被定义了超链接的E元素，且被访问）

a:visited {...}

<a href="#">...</a>

3.E:active 用户操作伪类选择器 （选择E元素且被激活，鼠标按住不动）不限于链接使用

ul li:active {...}

<ul>
			<li>...</li>
			<li>...</li>
			<li>...</li>
</ul>

4. E:hover 用户操作伪类选择器（选择被鼠标经过的E元素）不限于链接使用

ul li:hover {...}

<ul>
			<li>...</li>
			<li>...</li>
			<li>...</li>
</ul>

5. E:focus 用户操作伪类选择器 （选择获取焦点的E元素）

6. E:checked （选中所有被用户选中的元素）

7. E:disabled （选中所有不可用元素）

8. E:enabled （选中所有可用元素）

input:focus{...}

<form action="#" method="post">
			<input type="text" value=""/>
</form>

9. E:first-child 结构伪类选择器 （E有父元素，且为第一个子元素）

li:first-child{...}

<ul>
			<li>选中我</li>
			<li>...</li>
			<li>...</li>
</ul>

10. E:last-child 结构伪类选择器 （E有父元素，且为最后一个子元素）

li:last-child{...}

<ul>
			<li>...</li>
			<li>...</li>
			<li>选中我</li>
</ul>

11. E：only-child 结构伪类选择器 （该元素为父元素唯一的子元素）

span:only-child{...}

<div>
			<span>...</span>
</div>

12. E:nth-child(n) 结构伪类选择器 （该元素为父元素的第n个元素）

p:nth-child(2){...}

<div>
			<p>...</p>
			<p>选中我</p>
			<p>...</p>
</div>

13. E:nth-last-child(n) 结构伪类选择器 (该元素为父元素的倒数第n个孩子)

p:nth-last-child(3){...}

<div>
			<p>选中我</p>
			<p>...</p>
			<p>...</p>
</div>

14. E:first-of-type 结构伪类选择器 （有多个E，只有第一个被选中）

p:first-of-type{...}

<p>选中我</p>
<p>...</p>
<p>...</p>

15. E:nth-of-type(n)

16. E:last-of-type 结构伪类选择器 （有多个E，选择最后一个）

p:last-of-type{...}

<p>...</p>
<p>...</p>
<p>选中我</p>

17. E:nth-last-of-type(n)

伪元素选择器

1. E::first-line (选择E元素的第一行)
2. E::first-letter （选择E元素的第一个字符）
3. E::before （E元素前面插入内容）
4. E::after （E元素后面插入内容）

			div{
				width: 150px;
				height: 150px;
				border: 1px solid #FF0000;
				word-break: break-word;
			}
		
			p::first-line{
				color: #FF0000;
			}
			
			p::first-letter{
				font-size: 30px;
			}
			
			p::before{
				content: "向前追加内容";
			}
			
			p::after{
				content: "向后追加内容";
			}

<div>
		<p> 测试文本内容，仅供参考</p>
</div>

属性选择器

1. E[foo] （选择定义了foo属性的E元素，E元素可以省略表示定义了foo属性的任意类型元素）

option[disabled]{...}

<select>
			<option value ="0">...</option>
			<option value ="1" disabled="disabled">...</option>
			<option value ="2">...</option>
</select>

2. E::[foo=“bar”] （选择将foo属性值定义伪bar）

option[value="2"]{...}

<select>
			<option value ="0">...</option>
			<option value ="1" >...</option>
			<option value ="2">选中我</option>
</select>

3. E[foo$=“value”] （以value结尾）
4. E[foo^=“value”] （以value开头）
5. E[foo~=“value”] （单独含有value值）
6. E[foo*=“value”] （包含有value值）

			p[class$="p"]{
				color: #00FF00;
			}
			p[class^="1"]{
				text-decoration: underline;
			}
			p[class~="pmore"]{
				font-size: 10px;
			}
			p[class*="p1"]{
				text-decoration: line-through;
			}

<p class="p1 pmore pp">测试文字</p>
<p class="12 pmore p">测试文字</p>
<p class="p12 pmore pC">测试文字</p>
<p class="1pmore pm">测试文字</p>

* 通配符选择器

选择器的优先级