伪选择器和伪元素选择器

常用伪类

用来添加一些选择器的特殊效果

a:hover:鼠标滑过链接

a:link:未访问链接

a:visited:以访问链接

a:active:已选中链接

:nth-child(n):选择所有冒号前元素的父元素的第二个子元素

常用伪元素

用来添加一些选择器的特殊效果

p:before:在每个p元素之前插入新内容

p:after:在每个p元素之后插入新内容

选择器分组

把具有相同样式的选择器放在一起,这样方便组织和管理。

css 复制代码
h1,h2,h3,h4{
	font-size:20px;
}

兄弟选择器

用~号表示可以影响到一个元素后面所有的同级元素

html 复制代码
<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药,碧海青天夜夜心。"这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事,早在我国现代就遍及地流传着。</p>
<p>odkjslkdlsjmdl</P>
</body>
css 复制代码
div~p{
	width: 100px;
	height: 20px;
	background-color: aqua;
}
相关推荐
snow@li几秒前
d3.js:学习积累
开发语言·前端·javascript
vincention几秒前
JavaScript 中 this 指向完全指南
前端
qyresearch_12 分钟前
射频前端MMIC:5G时代的技术引擎与市场机遇
前端·5g
天蓝色的鱼鱼16 分钟前
Next.js 渲染模式全解析:如何正确选择客户端与服务端渲染
前端·react.js·next.js
一枚前端小能手22 分钟前
🚀 巨型列表渲染卡顿?这几个优化技巧让你的页面丝滑如德芙
前端·javascript
酷柚易汛智推官22 分钟前
Electron技术深度解析:跨平台桌面开发的利器与挑战
前端·javascript·electron
llz_11228 分钟前
第五周作业(JavaScript)
开发语言·前端·javascript
yannick_liu39 分钟前
nuxt4 + nuxt-swiper实现官网全屏播放
前端
苏打水com41 分钟前
JS基础事件处理与CSS常用属性全解析(附实战示例)
前端
W.Y.B.G43 分钟前
JavaScript 计算闰年方法
开发语言·前端·javascript