Question

我需要更改元素a，而我需要更改元素b中的元素。我可以使用CSS / HTML设法这样做是我的问题吗？

li:active{
    img{
       border:1px solid black;
    }
}

Answer 1

你会想要......

li:active img {
   border:1px solid black;
}

这会在img中设置所有 li:active个元素。如果您只想设置后者的立即后代，则需要：

li:active > img {
   border:1px solid black;
}

我建议你阅读Chris Coyier的文章＆＃34; Child and Sibling Selectors＆＃34;了解更复杂的CSS。此外，还有更复杂的基于位置关系的CSS选择器，例如li:active + img和li:active ~ img，但这超出了本答案的范围。

但是，您建议使用SASS，这是一个CSS预处理器。

Answer 2

不，你可以做的事情是你的选择器更具体一点 - 尝试以下方法：

li:active img{
    border:1px solid black;
}

Bon Voyage！

Answer 3

你可以这样做：

li:active img{
   border:1px solid black;
}

Answer 4

如果li:active img {boder:1px solid black;}是li:active > img {boder:1px solid black;}

的直接子项，您可以使用后代选择器：img或子选择器li

Answer 5

CSS3允许存在条件的嵌入式选择器。使用CSS3规范的有效嵌套CSS的示例是：

@media screen and (max-width:800px) {
    ul {
        float: none;
        max-width: auto;
        width: auto;
    }
    div:first-of-type {
        display: none;
    }
}

此处设置的条件是在media类型为screen（也称为桌面）时设置嵌套的样式，且不大于800px（max-width: 800px）。

Answer 6

您可以执行以下操作：

li:active img{
    border:1px solid black;
}

您所指的语法与CSS预处理器中的nested rules类似，例如LESS。浏览器本身不支持此语法，而必须将其编译为有效的CSS语法。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

变为：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

<强> http://lesscss.org/features/#features-overview-feature-nested-rules

Answer 7

    li:active img{
border: 1px solid black;
}

这是正确的答案，如果你想在1个条款中使用2个类或任何你把它们放在开头。注意：要使用空格连接2个元素。希望这有帮助。

我可以用css在标签中输入标签吗？

7 个答案: