问题出在哪里，为什么效果实现不了

首页课程实战体系课手记专栏慕课教程

问题出在哪里，为什么效果实现不了

来源：2-4 编程练习

VermouthYan

2019-09-01 15:18:54

<!DOCTYPE html>

<html>

<head>

<title>background-clip</title>

.border,.padding,.content{/*给最外层的div设置样式*/

width:300px;height:300px;

float:left;margin-left:50px;

}

text-decoration:none;

font-size:30px;

}

.div1,.div2,.div3{/*放置背景图片的div样式*/

width:220px;height:200px;

border:10px solid rgba(0,255,0,0.3);

padding:50px;

background-image:url("http://climg.mukewang.com/582c316e0001fd6507000210.jpg");

margin-top:50px;

}

.border:hover div,.padding:hover div,.content:hover div{

display:block;

}

/*补充代码*/

.div1,.div2,.div3{display: none;}

.border a:hover .div1{background-clip: border-box;}

.padding a:hover .div2{background-clip: padding-box;}

.content a:hover .div3{background-clip: content-box;}

</style>

</head>

<body>

<a href="">border-box</a>

</div>

<a href="">padding-box</a>

</div>

<a href="">content-box</a>

</div>

</body>

</html>

写回答

2回答

好帮手慕慕子

2019-09-02

同学你好，有影响，两者是有区别的

> 表示选择直接子元素
空格表示选择所有后代元素

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

好帮手慕慕子

2019-09-01

同学你好，因为a标签与div是兄弟元素，你这里的选择使用空格，表示后代选择器，所以无法实现效果，建议修改：可以使用兄弟选择器

如果帮助到了你，欢迎采纳！

祝学习愉快~~

hermouthYan

h 这个样子啊，我之前一直以为是将div显示出来的意思。那空格和加不加>对于子代选择有影响吗？都是选出的直接子代吗？

h019-09-02

共1条回复

0 学习 · 40143 问题

查看课程

相似问题

搞不懂，加了绝对定位，效果就不能实现了

回答 2

老师，帮忙看看为什么文字部分也有颜色，哪里出了错

回答 3

老师，我第一个哪里错了

回答 2

老师问题在内容里请看一下谢谢

回答 1

如何多点操作，用vscode？参数有顺序显示吗？实际工作中用的不多，什么情况下使用？

回答 3

打开慕课网App查看更多内容