如何单独控制“取消”的css?

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.mask{

width:200px;

margin:100px auto;

border:5px solid #ccc;

background: #ccc;

}

.confirm{

border:1px solid #fff;

background: #fff;

border-radius:20px;

overflow:hidden;

text-align: center;

}

.confirm-text{

border-bottom:1px solid #ccc;

}

.confirm-btn{

width:200px;

height:20px;

/*此处写代码*/

}

.confirm-btn:hover{

cursor:pointer;

background:gray;

/*此处写代码*/

}

.confirm-btn-sure:hover{ cursor:pointer;

background-color:gray;

}

.confirm-btn-sure{

width:100px;

float:left;

border-right: 1px solid rgb(235,235,235);

}

</style>

</head>

<body>

</div>

</body>

</html>

因为他和确定的第一个css名字都一样，而且，这个箭头变成水晶头如何变化？谢谢

慕粉154022159 2017-10-24

源自：CSS3用户界面 1-13 编程练习

收起

2回答

Miss路 2017-10-24 17:29:04

你的代码中的问题如下：

1、一个确定按钮，一个取消按钮，你想要实现在一行不是只给一个浮动就可以，两个都需要浮动，所以float:left需要添加在 .confirm-btn上，这样的话就需要调整一下两个按钮的宽度了，他俩的宽度+边框=200px，具体多少自己去算。

2、不想让两个同时出现变化，那就单独给去掉设置hover伪类啊，给取消再添加一个class名，然后单独设置。

整体参考下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
.mask{width:200px;margin:100px auto;border:5px solid #ccc;background:#ccc;}
.confirm{border:1px solid #fff;background:#fff;border-radius:20px;overflow:hidden;text-align:center;}
.confirm-text{border-bottom:1px solid #ccc;}
.confirm-btn{width:95px;height:20px;float:left;        /*此处写代码*/}
.btn:hover{cursor:pointer;background:gray/*此处写代码*/}
.confirm-btn-sure:hover{cursor:pointer;background-color:gray;}
.confirm-btn-sure{width:100px;border-right:1px solid rgb(235,235,235);}
    </style>
</head>
<body>
    <div class="mask">
        <div class="confirm">
            <div class="confirm-text">提示信息</div>
            <div class="confirm-btn confirm-btn-sure">确定</div>
            <div class="confirm-btn btn">取消</div>
        </div>
    </div>
</body>
</html>

另外你说的水晶我还是不知道是啥，猜测可能是那个小黄圈吧？那个是录制效果视频的时候录屏然间给的标志，不是我们代码实现的。

写代码一定要灵活一点，多思考，敢于尝试才能有进步，加油！

收起回答

Miss路 2017-10-24 13:49:00

不明白你说的单独取消css样式是什么意思，是多个元素有同样的class，然后设置了所有的有共同的属性，其中有某个元素想要取消这个属性吗？如果是这样的话，那就单独给这个标签重新定义一个class名，然后单独给这个class设置你想要的样式或者是设置你想要的属性值。关于你说的让箭头编程水晶头，不知你说的水晶头是什么样的，cursor有这么几个值你参考一下：

记得下次问问题，要把问题描述清楚，如果想要帮你看代码的话，要把代码完整的粘上来，这样比较方便老师为你详细的找出问题。祝学习愉快！

收起回答

提问者慕粉154022159 #1

作业内的那个鼠标变成像水晶一样的，在上门发的各种鼠标的变化，找不到相对应的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .mask{ width:200px; margin:100px auto; border:5px solid #ccc; background: #ccc; } .confirm{ border:1px solid #fff; background: #fff; border-radius:20px; overflow:hidden; text-align: center; } .confirm-text{ border-bottom:1px solid #ccc; } .confirm-btn{ width:200px; height:20px; /*此处写代码*/ } .confirm-btn:hover{ cursor:pointer; background:gray; /*此处写代码*/ } .confirm-btn-sure:hover{ cursor:pointer; background-color:gray; } .confirm-btn-sure{ width:100px; float:left; border-right: 1px solid rgb(235,235,235); } </style> </head> <body> <div class="mask"> <div class="confirm"> <div class="confirm-text">提示信息</div> <div class="confirm-btn confirm-btn-sure">确定</div> <div class="confirm-btn">取消</div> </div> </div> </body> </html> 我点击取消的时候，确定的背景色也同时发生变化。因为是一个css名字控制的所以不明白如何在同一个css名字下，如何完成这道题目。谢谢

2017-10-24 16:26:02
提问者慕粉154022159 #2

我把代码重新在最上面上传了。问题就是：我点击“取消”的时候，“确定”的背景色也同时发生变化。因为是一个css名字控制的所以不明白如何在同一个css名字下，如何完成这道题目。谢谢

2017-10-24 16:27:22