联合选择器

时间:2018-01-14 01:48:08

标签: html css

当我将类和类(或id和id,它并不重要)联合起来时,为什么这些更改仅适用于一个元素?

示例:图片下的图片和文字:

.photo
{
    width: 230px; height: 230px;
    margin: 15px;
}

    .photo:hover + .name
    {
        color: black;
    }

.name
{
    text-align: center;
    color: transparent;
}

2 个答案:

答案 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;}这也会产生同样的效果。