老师,写css时子元素集成父元素的样式,想让子元素不继承父元素的样式

老师,写css时子元素集成父元素的样式,想让子元素不继承父元素的样式

有什么方法吗?

比如这里点击微信弹出的二维码,做成了微信图标的伪元素,微信图标设置了透明度为0.6,二维码也跟着透明度0.6了

http://img1.sycdn.imooc.com//climg/5c72687c0001bbe102360308.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕星星 2019-02-25 14:47:09

子元素继承父元素的样式,如果是宽度或者高度等属性,可以直接在子元素中设置相同的属性覆盖继承的属性。

但是opacity透明度属性是覆盖不了的,可以使用背景颜色rgba()代替透明度设置,例如:

 background: rgba(235, 237, 239, 0.8);

自己可以测试下。

好帮手慕星星 2019-02-25 10:12:28

你好,伪类前面不需要添加元素本身,直接在:hover后面写就可以:

http://img1.sycdn.imooc.com//climg/5c734ec80001397803010117.jpg

透明度的问题,因为opacity属性是可以继承的,所以子元素也会有透明度的变化,可以开始设置透明度为0.6,鼠标移入的时候透明度变为1 ,这样就可以了。

自己再试试,祝学习愉快!

  • 提问者 小章鱼丸 #1
    “可以开始设置透明度为0.6,鼠标移入的时候透明度变为1 ”,我就是这样设置的。想问一般如果遇到不想让子元素继承父元素的样式,通常要怎么设置呢?
    2019-02-25 13:44:02
提问者 小章鱼丸 2019-02-24 17:52:32

这样写,鼠标移入微信图标,二维码为什么没显示呢?

http://img1.sycdn.imooc.com//climg/5c72695d00010c5007030734.jpg

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师