前端的学习之路：初级CSS---父元素和扩展

最新推荐文章于 2024-05-15 18:00:00 发布
最新推荐文章于 2024-05-15 18:00:00 发布
阅读量219 收藏
点赞数
分类专栏： 初级CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44647555/article/details/113894697
版权
本文深入探讨前端开发中的CSS技术，重点在于理解父元素选择器及其在扩展中的应用，帮助读者提升CSS布局和样式控制的能力。
摘要由CSDN通过智能技术生成

父元素和扩展

.box1{
   
    .box2{
   
        color: red;
    }
    >.box3{
   
        color: red;

        &:hover{
   
            color: blue;
            //此时父元素为box3
        }
    }
最低0.47元/天 解锁文章
new-SkyWaller
关注
专栏目录
css 选父元素,CSS中模拟父元素选择器
weixin_30750685的博客
08-03 7047
很多情况下，我们需要找到父元素，但可惜的是css中并没有这样的一个选择器。至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章。简单来说这个实现并不是真正的父元素选择器，只是利用其它思路来实现相同效果罢了。HTML：ppppppppCSS：div,p{margin:0;padding:0;}#box{width:300px;height:300px;position:relative;}#...
【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
m0_61049675的博客
01-31 3031
【代码】【CSS】css获取子元素的父元素，即通过子元素选择父元素（使用CSS伪类 :has() :not() ）
前端学习笔记88-父元素和扩展
weixin_45034895的博客
05-20 177
前端学习笔记88-父元素和扩展后代元素和子元素设置hover&符extend继承的第二种写法mixin 后代元素和子元素 less代码： .box1{ .box2{ color: #ff0; } >.box3{ color: #ff0; } } css对应代码： .box1 .box2 { color: #ff0; } .box1 > .box3 { color: #ff0; } 设置hover 这里得再hove
CSS 根据子元素选择父元素，并设置父元素的样式
最新发布
easonjake的博客
05-15 5341
场景举例：当子元素有增加了一个class时，需要影响其父元素的样式。可以看到，当p元素拥有child类时，父元素的样式发生了改变。可以使用":has"伪类来实现选择父元素的效果。
【CSS】CSS入门笔记第二弹~_css 父元素(1)
2401_84165953的博客
04-30 1029
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值：none left right。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6504
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
HTML+CSS+布局和样式+学习
02-26
在学习过程中，你还会遇到CSS预处理器（如Sass、Less）和后处理器（如PostCSS），它们扩展了CSS的功能，引入变量、嵌套规则、混合函数等，使CSS编写更加简洁和模块化。此外，响应式设计（Responsive Design）也是...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9201
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 943
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
2024年最新【CSS】CSS入门笔记第二弹~_css 父元素(1)，【一篇文章搞懂】
2401_84616027的博客
05-14 493
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值：none left right。
CSS子元素选择父元素的实现
11-19
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？
CSS子元素选择父元素
热门推荐
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
10-09 10万+
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？ <ul> <li> <a href="#" class="active">1</a> </li> <li> <a href=&quo
css子元素选择父元素的实现
一个小白的成长历程
01-24 2万+
css元素不能往前选择，即不能选择父元素或前兄弟元素；这都受制于DOM渲染规则；而这里我们使用别的方法来实现前元素或父元素选择的效果；有改变dom的排版位置，:focus-within伪类的选择；
在CSS里什么是父元素和兄弟元素?老是提到父元素和兄弟元素？
szt11的专栏
12-25 1186
〈html〉    〈head〉        〈title> ..                            332            233234                    ...     比方说上面的html结构，〈html〉元素就是〈body〉和〈head〉的父元素（上下级，包含关系）， 而〈body〉又 是〈ul〉和〈
css为何不支持父元素选择器
qq_40668697的博客
03-20 4365
为何CSS不支持父选择器？这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素？”是一样的。浏览器解析HTML文档，是从前往后，由外及里的。所以，我们时常会看到页面先出现头部然后主体内容再出现的加载情况。但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影...
CSS - 你遇到过子元素设置margin-top，影响父元素的情况吗
xingyu_qie的专栏
04-07 656
例如在一个div盒子元素内，需要设置一个标题，我们用一个p标签做为这个标题元素。根据UI设计要求，标题元素需要距离父div元素20px，理所当然想到的就是为标题元素设置margin-top为20px，希望可以撑开距离顶部的距离。但根据经验可知，这样做是存在问题的，父div元素会紧跟着p元素向下20px，并没有达到撑开20px的效果。先来看一下最初的代码和下图的效果。
【CSS】使元素在父元素中居中显示的几种方法
Primice个人空间
11-04 2973
介绍了几种关于元素居中的方法
前端Tip-父级元素的高度塌陷问题
weixin_38271901的博客
08-12 944
一、什么是高度塌陷？ 在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的（子多高，父多高）但当子元素设置浮动之后，子元素会完全脱离文档流，父元素还在文档流中，此时父元素的高度没有子元素撑起，从而导致父元素高度塌陷。（简单说：包含有浮动元素的上一级的元素高度为0，下面的元素就会上去，这样导致页面布局混乱）如下： <!--html代码--> <div class="father"> 我是父盒子 <div class="box
~97less中父元素和扩展
sanda_nd的博客
02-18 241
一、 less中： 转化后的css中： 二、 extend（）对当前选择器扩展指定的选择器样式 less中： 转化后的css中： 三、 在类选择器后面加上括号表示为mixins（混合函数），专门为其他选择器提供样式 less中： 转化后的css中： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值