Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 01 准备 选择器、伪元素

CSS 01 准备 选择器、伪元素

作者头像
卢衍飞
发布于 2023-02-13 13:32:14
发布于 2023-02-13 13:32:14
99100
代码可运行
举报
文章被收录于专栏:技术分享交流技术分享交流
运行总次数:0
代码可运行

CSS3 浏览器支持情况 ​ 网址查询:caniuse.com

CSS3的伪类选择器(一) 动态伪类选器 ​

a:link{} a:visited{} a:hover{} a:active{} UI元素状态伪类选择器 ​ html部分:

// disable 是状态 ​ CSS部分:(根据状态确定样式)

input :enable{} input:disable{} CSS3的伪类选择器(二) 结构伪类选择器 ​ html部分:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            <ul>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>

            </ul>

​ css部分

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        li:fist-child{}    元素的第一个子元素选中
        li:last-child{}     元素的最后一个子元素选中
        li:nth-child(****){}    选中顺序从左往右
            li:nth-child(2n){}  元素的第偶数个子元素选中
            li:nth-child(2n+1){}  元素的第奇数个子元素选中
            li:nth-child(n+5){}  元素从第5个子元素开始选中
            li:nth-child(4n+1){}  元素每4个元素选中

        li:nth-last-child(){}     选中顺序从右往左
        li:nth-of-type(){}     限定是li标签的子元素 从前往后
        li:nth-last-of-type{}    从后往前
        li:fist-of-type{}    限定是第一个li标签子元素
        li:last-of-type{}    限定是最后一个li标签子元素
        li:only-child{}      选择的元素是它父元素只有一个子元素
        li:only-of-type{}    选择的元素是它父元素只有一个子元素,但是限制子元素的标签类型为li
        li:empty{}              选中的li标签父元素是空的

伪元素 html:

css:

.demo::first-letter{} 文本段落首字 .demo::first-line{} 文本段落首行

.demo::before{ //demo之前

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
content:;     //伪元素的content属性必须要有,不设置也要有,留空

}

.demo::after{ //demo之后

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 content:;

}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023 年 01 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
更多伪类选择器,丰富你的 CSS 工具箱
伪类选择器在 CSS 中起着至关重要的作用,它们允许你根据元素的特定状态或位置来选择元素,从而实现更加精细的样式控制。
友儿
2024/09/04
1250
前端学习(15)~css3学习(九):选择器详解
CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
Vincent-yuan
2020/03/19
5340
CSS3选择器大全[通俗易懂]
1.CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。
全栈程序员站长
2022/09/14
7610
CSS3选择器大全[通俗易懂]
结构伪类选择器-CSS3新特性
ul li:first-child { background-color: green; } 这种写法什么都不会选出来,因为ul标签下的第一个子元素是p,不是li,所以不会有元素被选出来。逻辑来说的话就是:它会先找到ul下的第一个子元素,然后去和li比较,发现标签类型不符合,所以就不会选择
阿年、嗯啊
2021/04/27
4980
结构伪类选择器-CSS3新特性
深入解读CSS高级选择器
CSS选择器是网页样式设计的核心组成部分,它们使开发者能够精准定位页面上的元素并施加相应的样式。在众多选择器中,高级选择器因其强大的定位能力和灵活性备受青睐。接下来,我们将逐一详解这些高级选择器,并通过实例代码加深理解。
老K博客
2024/05/04
1740
CSS基础语法(二) CSS的9种选择器
样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素  #id值{ … }  3.标签选择器 根据HTML标签选择样式应用的属性 标签名{ … } 4.子选择器 .food>li{     border:1px solid red; } 5.包含选择器 .first span{color:red;} 6.通用选择器 * {color:red;} 7.伪类选择器 1、静态伪类(只应用于超链接) [注意
柴小智
2018/04/10
1K0
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
Rossy Yan
2025/01/13
1170
《前端技术基础》第02章 CSS基础【合集】
CSS3 选择器
CSS3选择器分为:结构型伪类选择器、UI元素状态伪类选择器,否定选择器,和伪元素
全栈程序员站长
2022/09/14
2360
第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。
半指温柔乐
2018/09/11
1.6K0
CSS3选择器介绍及用法总结[通俗易懂]
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注: ele代表element元素 attr代表attribute属性,val代表value属性值 :xxx都属于伪类选择器,::xxx都属于伪元素选择器 有名字的选择器我尽量细分了 #CCS1选择器#
全栈程序员站长
2022/09/14
1.5K0
CSS3选择器介绍及用法总结[通俗易懂]
CSS3选择器 | 每个前端开发者必须要掌握的技术
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157484.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/18
7670
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ;
韩曙亮
2023/04/24
1.3K0
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
【CSS】381- 提升你的CSS选择器技巧
我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。
pingan8787
2019/10/18
1.1K0
【CSS】381- 提升你的CSS选择器技巧
CSS选择器详解
最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外! 看来这基础的东西,大家都说很重要,可真正能静下心来去看的并不多,更别说在项目中灵活使用了! 元素选择器 通配选择器 * { sRules } 选定文档所有的元素 /** 设置所有元素为红色 **/ * {   color: red; } <div>我是div</div> <p>我是p</p> 类型选择器 E { sRules } 选定指定的文
laixiangran
2018/04/11
2.9K0
css3 选择器
  以前学习css的时候总是看见一个效果就看一下,没有系统的学习,最近看见了这个css3的网站,打算系统学习下,今天要跟大家分享的是css3的选择器。
py3study
2020/01/15
5580
CSS入门5-选择器
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
8650
css3选择器
属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的 E[attr="value"]指定了属性名,并且有属性值,而且属值中包含了value 结构性伪类选择器 E:nth-child(n) 表示E父元素中的第n个字节点 p:nth-child(odd){background:red}/匹配奇数行/ p:nth-child(even){background:red}/匹配偶数行*/ p:nth-child(2n){background:red} E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算 E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算 E:empty 表示E元素中没有子节点。注意:子节点包含文本节点 E:first-child 表示E元素中的第一个子节点==nth-child(1) E:last-child 表示E元素中的最后一个子节点 E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的 E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点 E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点
河湾欢儿
2018/09/06
4500
【Java 进阶篇】CSS 选择器详解
CSS(层叠样式表)是一种用于描述网页上元素样式的语言。要想有效地使用CSS,了解CSS选择器是至关重要的,因为它们允许你选择要应用样式的HTML元素。在本文中,我们将详细介绍CSS选择器的各种类型和用法,以便你能够更好地掌握这一关键概念。
繁依Fanyi
2023/10/12
3240
【Java 进阶篇】CSS 选择器详解
零基础学前端开发之CSS3深入选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(。
张哥编程
2024/12/19
840
零基础学前端开发之CSS3深入选择器
CSS3常用选择器
一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素 语法格式:父元素 > 子元素 (Father > Children) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 (Eelement + Sibling) 兼容性:IE8+、FireFox、Chrome、Safari、Opera 通用兄弟选择器
Leophen
2019/08/23
8490
相关推荐
更多伪类选择器,丰富你的 CSS 工具箱
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验