CSS常用选择器、伪元素选择器、伪类选择器大全—

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元素。

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

CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
文章目录 CSS的浮动框1{float:none;} 框1{float:right;} 框1{float:left;} 框1.2.3{float:left;} CSS的定位浮动和定位的使用区别 C ...
HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下. <标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签 ...
CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
CSS中的一个基本概念就是盒子模型,所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域,即元素的盒子. 盒子由margin(外边距).border(边框).padding(内边距).conten ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
浅析什么是伪类和伪元素？伪类和伪元素的区别解析
一.理解什么是伪类?什么是伪元素? 1.伪类种类伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222}div:first-child{color:#33 ...

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

1. 常用的CSS选择器

2. 伪元素选择器

3. 伪类选择器

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

最新文章

热门文章