006 CSS常见选择器 CSS伪类 CSS伪元素

文章目录

CSS选择器
伪类
- 动态伪类
伪元素(pseudo-elements)

CSS选择器

什么是CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

选择器分类

通用选择器(universal selector)

元素选择器(type selectors)

类选择器(class selectors)

id选择器(id selectors)

属性选择器(attribute selectors)

组合(combinators)

伪类(pseudo-classes)

伪元素(pseudo-elements)

通用选择器

所有的元素都会被选中

一般用来给所有元素作一些通用性的设置:

比如内边距、外边距

比如重置一些内容

简单选择器(重要)

元素选择器:使用元素的名称

类选择器:使用.类名

id选择器:使用#id

id注意事项：

一个HTML文档里面的id值是唯一的，不能重复

id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以用驼峰标识

最好不要用标签名作为id1值

属性选择器(了解即可)

拥有某一个属性 $att$

属性等于某个值 $att=val$

$attr\*=val$ :属性值包含某一个值val;

$attr\^=val$ :属性值以val开头;

$attr$=val$ :属性值以val结尾;

$attr\|=val$ :属性值等于val或者以val开头后面紧跟连接符-;

$attr\~=val$ :属性值包含val，如果有其他值必须以空格和val分割

后代选择器(重要)

后代选择器一:所有的后代(直接/间接的后代)

选择器之间以空格分隔

后代选择器二:直接子代选择器(必须是直接子代)

选择器之间以>分割;

兄弟选择器(理解)

兄弟选择器一:相邻兄弟选择器

使用符号+连接

兄弟选择器二:普遍兄弟选择器

使用符号~连接

选择器组(重要)

交集选择器:需要同时符合两个选择器条件(两个选择器紧密连接)

为了精准的选择某一个元素

并集选择器:符合一个选择器条件即可(两个选择器以,号分割)

为了给多个元素设置相同的样式

伪类

伪类(Pseudo-classes)是选择器的一种，它用于选择处于特定状态的元素

常见的伪类有

1动态伪类(dynamic pseudo-classes)

:link、:visited、:hover、:active、:focus

2.目标伪类(target pseudo-classes)

:target

3.语言伪类(language pseudo-classes)

:lang()

4.元素状态伪类(UI element states pseudo-classes)

:enabled、:disabled、:checked

5.结构伪类(structural pseudo-classes)

:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()

:first-child、:last-child、:first-of-type、:last-of-type

:root、:only-child、:only-of-type、:empty

6.否定伪类(negation pseudo-classes)

:not()
所有的伪类:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类

使用举例

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标挪动到链接上(重要)

a:active 激活的链接(鼠标在链接上长按住未松开)

使用注意

:hover必须放在:link和:visited后面才能完全生效

:active必须放在:hover后面才能完全生效

建议编写顺序:link 、:visited、:hover、:active

除了a元素，:hover、:active也能用在其他元素上

:focus指当前拥有输入焦点的元素(能接收键盘输入)

文本输入框一聚焦后，背景就会变红色

因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

动态伪类编写顺序建议为

:link、:visited、:focus、:hover、:active

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素(pseudo-elements)

常见的伪元素

:first-line、::first-line

:first-letter、::first-letter

:before、::before

:after、::after

为了区分伪元素和伪类，建议伪元素使用2个冒号

::first-line可以针对首行文本设置属性

::first-letter可以针对首字母设置属性

::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)

常通过content属性来为一个元素添加修饰性的内容

html 复制代码

<html>
	<head>

		<style>
    		.box::before {
      		content: "123";
      		color: red;
    		}

    		.box::after {
      		content: "321";
      		color: blue;
    		}

  		</style>

	</head>

	<body>
		<div class="box">div元素</div>
		
	</body>


</html>

html 复制代码

<html>
	<head>
		<style>
			.box5::after {
				content: "";
				display:inline-block;
				width: 8px;
				height: 8px;
				background-color: #f00
			}
		</style>
	</head>
	<body>
	</body>
</html>