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

文章目录

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>
相关推荐
我要洋人死28 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人39 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人40 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#