Question

我有这个HTML：

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#top">
                <i class="fa fa-play-circle"></i>  !!!!!!!!!!!!
            </a>
        </div>
    </div>
</nav>

我试图定义一个只会影响<a>元素的css，而不是＆＃39;！＆＃39;符号。我尝试的CSS是：

.navbar-custom.navbar-fixed-top.navbar-brand a { something }

这个CSS不会影响这个元素，我不知道为什么......

Answer 1

您忘记了最后一个类选择器之前的空格，因为.navbar-brand是具有类.navbar-custom和.navbar-fixed-top的元素的子元素，您需要在它之前插入一个空格。< / p>

第二个问题是.navbar-brand是<a>元素的类，所以你需要这样做：

.navbar-custom.navbar-fixed-top a.navbar-brand { something }

有关选择元素子元素的下降选择器（空格）的更多信息，请参阅MDN

为特定元素定义css

1 个答案: