针对<a> tag inside a <ul></ul></a>的风格

Question

我正在尝试运行此CSS：

.portfolio-carousel.title a {
  text-decoration: none;
}

在这个HTML上：

<ul class="portfolio-carousel">
    <li>
        <h4 class="title">
            <a href="http://www.yahoo.com">Yahoo</a>
        </h4>
    </li>
</ul>

但我什么都没有改变，我不知道为什么。

Answer 1

您的选择器不正确，您需要在类名之间留一个空格来表示祖先 - 后代关系：

.portfolio-carousel .title a {
    /* CSS here */
}

JS Fiddle demo

你原来的CSS选择器正在寻找一个a元素，它是祖先的后代，同时包含portfolio-carousel 和 title个类，而你想要一个a元素的后代，.title元素的后代本身是.portfolio-carousel元素的后代。

参考文献：

• CSS Selectors, Level 3。