Question

我为元素设置了这组样式：

#gallery > div > a {
  width: 100%;
  display: block;
  font-size: 0.85em;
  color: rgb(0, 118, 209);
  text-align: left;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: initial;
  position: absolute;
  top: -14px;

当我徘徊时，我需要它用下划线加亮，所以我这样做了：

div[class^="pic"] > img:hover > a {
  text-decoration: underline;
}

但它不起作用。我试图使用！重要，但它也没有结果。

对不起，这是我的错，这是：

<div id="gallery">
      <div class="pic1">
        <img src="./img/1.jpg"><a href="#">...
        </img>
      </div>
      <div class="pic2">
        <a href="#">...</a>
        <img src="./img/2.jpg">
        <p>...</p>
      </div>
      <div class="pic3">
        <a href="#">...</a>
        <img src="./img/3.jpg">
        <p>...</p>
      </div>
      <div class="pic4">
        <a href="#">...</a>
        <img src="./img/4.jpg">
        <p>...</p>
      </div>
    </div>

Answer 1

假设这个结构（最初提供）

<div id="gallery">
      <div class="pic1">
        <img src="./img/1.jpg"><a href="#"></a>
          <p></p>
        </img>
      </div>
 </div

你的选择器应该是

div[class^="pic"] > img:hover + a {
  text-decoration: underline;
}

关于选择器的有用文章：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

无法为元素设置未继承的属性

1 个答案: