CSS层级选择器和伪类选择器

最新推荐文章于 2024-03-08 17:51:21 发布
最新推荐文章于 2024-03-08 17:51:21 发布
阅读量152 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44157349/article/details/113005085
版权

CSS层级选择器和伪类选择器

层级选择器

1.通过父级元素逐层找到子元素：父级元素选择器 子元素选择器
属性选择器
2.通过指定标签明和属性值的方法：标签名[属性名=属性值]
3.分组选择器：选择器1，选择器2，选择器3…选择器n[]

伪类选择器

用于分别定义标签的四种状态
未访问过 :link{}
访问过 :visited{}
鼠标悬停 :hover{}
鼠标激活 :active{}
hover必须在link和visited后
active必须在hover之后

追風者0x8ffd98a8
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：css常用基本层级伪类属性选择器
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-09 245
常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本...
CSS 选择器大全 伪类选择器大全
黄钟飞的博客
02-28 1369
css选择器大全,css伪类选择大全,前置伪类,后置伪类,伪类筛选,常用选择器,交集选择器
属性选择器、伪类选择器、层级选择器
weixin_43720739的博客
03-19 192
渐进增强：（作用范围：从小到大） 先保证最基本的功能 > 用户体验提升 优雅降级：（作用范围：从大到小） 先针对版本较高的设备进行项目构建，保证用户体验的完美 牺牲一些效果，保证最基本的功能 选择器（选择符）： id class 类型（div span） 后代选择器 伪类选择器 伪元素选择… 属性选择器： e[attr]{} 选中e元素，且e元素有attr属性， e[a...
CSS伪类与常用标签属性整理与块级、行级、行级块标签（文本，背景，列表，透明，display）
最新发布
2303_77522514的博客
03-08 970
p{穿过文本线条p{下划线p{标准文本
使用CSS结构伪类选择器-层次
m0_55068275的博客
12-13 756
1.结构伪类 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用CSS3结构伪类选择器</title> <style type="text/css"> /*第一个孩子 注意：冒号前面的元素存在才能选中，如果是不存在的元素，选中的是星空*/ body>p:first-child{background: red
学习css常用基本层级伪类属性选择器
marcushbs的博客
08-04 115
常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-lin...
css 串联选择器和后代选择器介绍及示例
12-13
当这两个选择器用空格分隔时，它们结合成一个串联选择器，表示同时具有这个ID和类的元素。例如： ```html <div class="a" id="qq"><span>look at the color</span></div> ``` 对应的CSS样式如下： ```css #qq.a { ...
十种CSS选择器详解介绍
01-31
### 十种CSS选择器详解...每种选择器都有其特定的应用场景和限制，了解它们的特点有助于编写更加高效和维护性的CSS代码。在实际项目中，应综合考虑各种选择器的特性及其对性能的影响，灵活运用，以达到最佳的设计效果。
jQuery层级选择器用法分析
10-24
本文将详细介绍jQuery中常见的四种层级选择器：子元素选择器、后代元素选择器、紧邻同辈元素选择器和相邻同辈元素选择器。 子元素选择器（>）是用于选择指定元素的直接子元素。这里的“直接子元素”意味着只选择...
css后代选择器使用方法实例
09-25
总的来说，理解和熟练使用CSS后代选择器是创建高效、可维护的CSS样式表的关键步骤之一。通过正确使用后代选择器，我们可以确保样式只作用于目标元素，避免样式冲突，同时提升代码的可读性和可维护性。
jQuery层级选择器实例代码
10-20
jQuery层级选择器是其选择器中的重要组成部分，用于选取特定的DOM元素，它包括了子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器等。 首先，子选择器“>”用于选取指定元素的直接子元素。例如，代码“$('div...
css伪类选择器，层级选择器
zhiyinweini3的博客
02-20 461
背景：学习前端知识，自己做页面 目的：学习前端知识 组网图：不涉及 工具：vscode1.41.0 简介：css伪类选择器； css伪类选择器，是在CSS选择器中添加关键字，指定匹配元素的特殊状态. css-hover伪类选择器: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-...
LV1 之------DAY3 伪元素伪类 & 定位与层级关系
跛鳖千里，丘山崇成
04-04 541
LV1 之------DAY3 定位与层级关系 一、3种定位 1、 position: absolute 绝对定位：完全脱离文档流 ① 父级有定位：以所有父级元素参考 ②父级未定位：以html/body 2、position: relative ; 相对定位：不脱离 以自身为参考 3、position: fixed; 固定定位：全脱离 以浏览器可视窗口参考 上述定位都可用 坐标 (即以参...
CSS中层次、属性、结构伪类选择器
Mr_zdk的博客
09-14 492
层次选择器   注意: 这些选择器最终的控制对象都是F! 实际应用中, 后代选择器和子元素选择器是使用得较多的!   属性选择器 结构伪类选择器 E:first-child 选择的是在同级元素中排第1位的E元素 E:last-child 选择的是在同级元素中排最后1位的E元素 E:nth-child(n) 选择的是在同级元素中排第n位的E元素 E:first-of-ty...
前端学习之CSS---层级、属性、伪类选择器
weixin_45258154的博客
05-31 696
层级选择器、属性选择器、伪类选择器
css3层级选择器、属性选择器、伪类选择器（结构和目标）
YY的博客
09-22 768
css3层级选择器、属性选择器、伪类选择器（结构和目标）
css 设置伪元素层级在父级下边
G925010178的博客
08-06 8456
css伪元素，层级太高，挡住了父级子元素 父级div，伪元素before和after分别实现方框内的十字线。子集是一张图片，被伪元素遮挡住了。 <style> #show_image{ border: 1px solid rgba(0, 0, 0, 0.58); position:relative; width:100px; height:100px; } #show_image::before{ content:""; position:abso
css选择器+ ＞ ~,伪类 选择器nth-of-type() nth-child() 选择父类元素下的子元素
乔豆麻袋_
03-10 2413
nth-of-type() 以类型区分来选择父元素下的子元素 p:nth-of-type(2) 父元素下第二个p标签 如果不写前缀 :nth-of-type(2)则选择父元素下所有类型标签的第二个 nth-child() 不区分标签 :nth-child(2) 选择父元素下第二个元素 子代选择器 h1 > span h1 元素下的第一个span子元素 ...
CSS盒子模型各属性层级及基础知识
qi1271199790的博客
01-31 2793
经测试box-shadow应该位于background-image之上并且位于content之下，因此对标签设置内阴影会被其内容（图片）覆盖； 1.设置浮动属性后，会对相邻的元素产生影响，相邻元素特指仅邻后面的元素。  2.受到影响的元素清除flow影响的方法：clear：both；只适用于紧邻后面的元素的清楚浮动，而当父包含块缩成一条时就不起作用了。  或者同时设置width：100%；+
CSS选择器详解：标签、类、ID与其他
- 链接伪类选择器，如 `a:link`、`a:visited`、`a:active` 和 `a:hover`，分别对应未访问、已访问、活动和鼠标悬停状态的链接样式。 - 焦点伪类选择器，如 `input:focus`，在元素获得焦点时应用样式。 10. **属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值