【前端学习-02】CSS3属性选择器/结构伪类选择器/伪元素选择器/案例

最新推荐文章于 2024-05-28 07:58:52 发布
最新推荐文章于 2024-05-28 07:58:52 发布
阅读量251 收藏
点赞数
文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QNANWang/article/details/105642388
版权

CSS3属性选择器

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

CSS3伪类选择器-01在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

CSS3伪类选择器-02

在这里插入图片描述在这里插入图片描述

css3结构伪类选择器-03

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

CSS伪元素选择器-04

伪元素选择器：两个冒号 ：：before
伪元素：一个冒号：before在这里插入图片描述
行内元素无大小-解决：display：block在这里插入图片描述在这里插入图片描述
案例：伪元素字体图标在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
结果显示
在这里插入图片描述

QNAN-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端-6-伪类选择器、伪元素选择器、结构性伪类选择器
qq_38328762的博客
08-20 225
伪类选择器 4个伪类选择器：l-v-h-a :link a:link{color:red} /*未被访问的链接*/ :visited a:visited{color:blue}} /*已被访问的链接*/ :hover a:hiver{cursor:pointer} /*鼠标移动到链接上*/ active a:active{color:pink} /*正被点击的链接*/ ...
CSS伪类/伪元素选择器整理
09-25
CSS中的伪类和伪元素选择器是用于增强网页内容表现力的重要工具。伪类主要用于定义元素的特殊状态，而伪元素则允许我们向文档树中插入新的虚拟元素。以下是对这些选择器的整理和详细解释： 1. 超链接伪类 - :link...
css3结构伪类选择器使用小例子
Sinjiufai的博客
10-24 1801
结构伪类选择器 结构伪类选择器 first-child nth-child(n) 里面可以是数字 可以是even(偶数) odd(奇数） 也可以是式子如 -n+5 表示前五个 last-child 用法与上面基本一样 但是 nth-of-type会先去查看前面指定的元素 再去看目标是排在第几个 nth-of-type(1) 例 /* 选择ul里面的第1个li */ ul li:first-child { background: blue; ..
CSS3 伪元素与伪类选择器区别、详解与应用实例
最新发布
JINGWHALE
05-28 764
本文详细介绍了CSS3 伪元素与伪类选择器区别、API与应用实例。熟练掌握以上CSS3伪类与伪元素选择器及其应用场景，开发者能够编写出更高效、更具表现力和交互性的CSS代码，提升网站的用户体验和视觉效果。伪元素 能够通过 content 属性添加或替换内容。例如，:before 和 :after 可以插入文本、图像或其他生成的内容。伪类 仅影响元素的样式，而不添加或修改内容。它们基于用户的交互、文档结构或其他逻辑条件来改变元素的表现。
CSS 结构伪类选择器案例
AOOOOO李
01-20 379
结构伪类选择器 /*ul 的 第一个元素*/ ul li :first-child{ background: black; } /*ul的最后一个元素*/ ul li:last-child{ background: red; } /* 选中 p1 :定位到父级元素 选择当前的第一个元素 选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 顺序 */ p:nth-child(1){
CSS基础(part20)--CSS3结构伪类选择器
小山羊的学习日志
09-06 265
学习笔记，仅供参考，有错必究 参考自：pink老师教案 结构伪类选择器 属性列表： nth-child(n) 参数详解： 注意：本质上就是选中第几个子元素 n可以是数字、关键字、公式 n如果是数字，就是选中第几个 常见的关键字有 even 偶数、odd 奇数 如果是第0个元素，或者超出了元素的个数会被忽略 nth-child 和 nt-of-type 的区别： nth-child 选择父元素里面的第几个子元素，不管是何种类型 nt-of-type 选择指定类型的元
字体声明和使用案例
weixin_43837268的博客
10-10 321
/*字体声明*/ @font-face{ font-family:'icomoon'; src:url('fonts/icomoon.eot?p4ssmb'); src:url('fonts/icomoon.eot?p4ssmb#iefix')format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb')format('truetype'), ur...
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
CSS3结构性伪类选择器九种写法
01-19
一、X:nth-child(n) ...demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
09-25
在CSS3中，引入了伪类选择器 nth-child()，它允许开发者对元素进行更复杂的匹配，比如选择奇数行或偶数行并应用不同的样式，这对于网页中的表格或列表项尤为有用。 nth-child() 伪类选择器的参数形式为 an+b，其中a...
前端学习笔记-15-伪元素选择器的简单案例
CSDNXXCQ的博客
11-03 732
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p:first-letter {
结构伪类选择器
m0_62181310的博客
04-04 5779
6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd。5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even。7.:nth-child(-n+i) 选择父元素里前i项子元素。11.选择父元素里边按照不同类型的第n个子元素。2.选择父元素里边的最后1个子元素。1.选择父元素里边的第1个子元素。选择父元素里边的最后1个子元素。3.选择父元素里边第n个子元素。选择父元素里边的第1个子元素。选择父元素里边第n个子元素。...
css3学习 之 css选择器(结构性伪类选择器)
xyjikl
07-06 1259
同上篇：先说明下本机浏览器吧：opera 10 firefox 4.0 chrome 由于是公司机器xp的。。所以ie版本为 ie8  另外有一个ietest  所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，它的使用方法如下所示。 选择器:伪元素{属性:值} 伪元素选择器也可以与类配合使用，使用方法如下所示。  选择
伪元素选择器
jwz934738949的博客
05-03 2680
伪元素选择器作用： 为某个元素的前面或者后面添加子元素。 格式： 标签::before{属性: 值;}。在标签之前添加子元素 标签::after{属性: 值;}。在标签之后添加子元素 content:在伪元素选择器中代表内容； visibility: hidden:将伪元素选择器隐藏 <!DOCTYPE html> <html> <head> ...
伪类选择器示例
qq_39787515的博客
10-27 170
&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;伪类选择器示例&lt;/title&gt; &lt;style&gt; /*链接未被点击，呈现的颜色*/ a:link{ color: red; } /*链接被点击过，呈现的颜色...
结构伪类选择器（总结）
weixin_43806532的博客
03-03 687
什么是伪类选择器？ 波浪选择器连接符~ 作用：两个css选择器通过波浪线连接起来，但只作用于后一个css选择器，并且必须出现前一个选择器才符合结构，它们必须是同级的，拥有共同的父节点 1 2 ![此时只有第二个div字体颜色变成了粉红色](https://img-blog.csdnimg.cn/20200227152737117.png) ...
CSS选择器详解：元素、关系、属性、伪元素与伪类
"CSS选择器.pdf" 在前端开发中，CSS（Cascading Style Sheets）是用于控制网页元素样式的重要工具。CSS选择器是CSS的核心组成部分，它允许开发者精确地定位到HTML或XML文档中的特定元素，从而为其应用样式。CSS选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值