当我将类和类(或id和id,它并不重要)联合起来时,为什么这些更改仅适用于一个元素?
示例:图片下的图片和文字:
.photo
{
width: 230px; height: 230px;
margin: 15px;
}
.photo:hover + .name
{
color: black;
}
.name
{
text-align: center;
color: transparent;
}
答案 0 :(得分:0)
.photo:hover + .name {
color: black;
}
示例:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover + .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
此代码表示:当具有类photo
的元素悬停,并且同一级别的下一个元素具有类name
时,具有类photo
的元素的颜色将更改为黑色。
如果要将相同的CSS规则应用于多个标签/ ID /类,则需要使用逗号,如下所示:
.photo:hover, .name {
color: black;
}
示例:
div {
width: 50px;
height: 50px;
color: blue;
}
.photo:hover, .name {
color: black;
}
<div class="photo">.photo</div>
<div class="name">.name</div>
在这种情况下,黑色将应用于具有name
类的元素,并应用于具有photo
类的元素。
答案 1 :(得分:0)
+不用于为两个类选择共同样式。 '+'是相邻兄弟选择器的符号,它选择所有与指定元素相邻的兄弟元素的元素。如果你想为这两个类增加一些共同的风格,那么只需将两个类分开,如.photo:hover,.name {color:black;}或者你可以在类名中使用一些常用词,而不是照片,你可以写下“照片颜色”而不是名称“名称颜色”,然后使用.color {color:black;}来设置样式。在这种情况下,黑色将应用于您的两个类,或者您可以使用具有公共类名的属性选择器[class * =“color”] {color:black;}这也会产生同样的效果。