blog-CSS之选择器（属性选择器+伪类选择器+伪元素选择器）

属性选择器

1.[attribute]

选取带有attribute属性的元素
举例：

	
1
	
2
	
3

2.[attribute=value]

选择标签中带有attribute属性，并且属性值为value的标签
举例：

	
1
	
2
	
3

3.[attribute^=value]

选中带有attribute属性中以value开头的标签
举例：

4.[attribute$=value]

选中带有attribute属性中以value结尾的标签
举例：

伪类选择器

1.与状态有关

与状态有关的伪类选择器有四种
:link        a标签还未被访问（只能使用于超链接）
:hover     光标悬浮到元素上时（可用在多个元素标签中）
:active    a标签激活（鼠标摁住不动时显示）
:visited   a标签被访问过时（只能使用于超链接）
举例：

	我是一个链接

结果

2.与子元素相关

与子元素相关的伪类选择器有六种
:first-child         选中指定元素下的第一个子元素(即选中它的第一个儿子)

:last-child         选中指定元素下的最后一个子元素(即选中它的最后一个儿子)

:nth-child(v)     选中指定元素下的第v个子元素(v 可为数字，公式，关键字等)

举例

	

		
1
		
2
		
3
		

			
4
			
5
			
6
		
	

在上述的例子中出现了一个经常会被误解的一个错误，当选中class为name的div下的最后一个p标签时，为什么3的背景颜色没有变化？
答：class为name的div(假设称外div)的子元素一共有四个，三个p标签和一个div标签，外div的第一个儿子是p标签，与css选择器中指定的p标签相同，所以1变红色，而外div的最后一个儿子是div，与选择器中指定的p并不相同，所以这个选择器里的样式不起作用，即3没有变颜色。

:first-of-type     选中指定元素下的与指定元素一致的第一个子元素(即选中儿子中指定标签元素的第一个儿子)

:last-of-type     选中指定元素下的与指定元素一致的最后一个子元素(即选中儿子中指定标签元素的最后一个儿子)

:nth-of-type(v)     选中指定元素下的与指定元素一致的第v个子元素(即选中儿子中指定标签元素的第v个儿子,v 可为数字，公式，关键字等)

举例

	

		
1
		
1
		
2
		
2
		
3
		
3
	

伪元素选择器

伪元素选择器常用的有以下两个
::after        在元素内部所有子元素之后添加内容

::before     在元素内部所有子元素之前添加内容

这两个伪元素选择器使用最多的作用是清除浮动造成的父元素失去高度，实现父元素的高度只适应。

通常使用以下伪元素选择器的格式来实现清除浮动

.class-name::after{
	content: "";
	display: block;
	clear: both;/*清除掉两边的浮动对象*/
}

content可以包含的内容有：
1.文本或其他字符
2.图片(使用场景：下拉列表中文字前的图标)
3.空

举例

	

	

		
1
		
2
		
3
	

此文章为本人原创，仅限于本人的学习总结记录，若有错误之处请留言提出。