CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记

Posted 2021-10-01 来老铁干了这碗代码

1. 常用的CSS选择器

CSS选择器的作用就是从html页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。

选择器	代码	示例代码	说明
通用选择器	*	*{}	选择所有元素。
标签选择器	元素名称	a{}、body{}、p{}	根据标签选择元素。
类选择器	.<类名>	. beam {}	根据class的值选择元素。
id选择器	#<id值>	#logo{}	根据id的值选择元素。
属性选择器	[<条件>]	[href]{}、[attr=”val”]{}	根据属性选择元素。
并集选择器	<选择器>,<选择器>	em,strong{}	同时匹配多个选择器，取多个选择器的并集。
后代选择器	<选择器> <选择器>	.asideNav li {}	先匹配第二个选择器的元素，并且属于第一个选择器内。
子代选择器	<选择器> > <选择器>	ul>li{}	匹配匹配第二个选择器，且为第一个选择器的元素的后代。
兄弟选择器	<选择器>+<选择器>	p+a{}	匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。
伪选择器	: :<伪元素>或: <伪类>	p::first-line{}、a:hover{}	伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。

2. 伪元素选择器

元素名	描述
::first-line	匹配文本块的首行。如p::first-line表示选中p元素的首行。
::first-letter	匹配文本内容的首字母。
::before	在选中元素的内容之前插入内容。
::after	在选中元素的内容之后插入内容。

3. 伪类选择器

元素名	描述
:root	选择文档中的根元素，通常返回html。
:first-child	父元素的第一个子元素。
:last-child	父元素的最后一个子无素。
:only-child	父元素有且只有一个子元素。
:only-of-type	父元素有且只有一个指定类型的元素。
:nth-child(n)	匹配父元素的第n个子元素。
:nth-last-child(n)	匹配父元素的倒数第n个子元素。
:nth-of-type(n)	匹配父元素定义类型的第n个子元素。
:nth-last-of-type(n)	匹配父元素定义类型的倒数n个子元素。
:link	匹配链接元素。
:visited	匹配用户已访问的链接元素。
:hover	匹配处于鼠标悬停状态下的元素。
:active	匹配处于被激活状态下的元素，包括即将点击（按压）。
:focus	匹配处于获得焦点状态下的元素。
:enabled (:disabled)	匹配启用（禁用）状态的元素。
:checked	匹配被选中的单选按钮和复选框的input元素。
:default	匹配默认元素。
:valid (:invalid)	根据输入数据验证，匹配有效（无效）的input元素。
:in-range (out-of-range)	匹配在指定范围之内（之外）受限的input元素。