Question

＆＃13;

<ul class="navbar">
				<li> <a href="index.html">Home</a></li>
				<li> <a href="#">Categories</a></li>
				<li> <a href="#">About us</a></li>
				<li class="myActive"> <a href="#">Contact</a></li>
</ul>

＆＃13;

<a>

＆＃13;

我想在<span>标签中更改文字的颜色，所以我写了一个改变li标签背景的课程，但是它没有改变我在li中的颜色文字。

经过一番研究后，我了解到我需要在文本中添加<a>。但我不明白为什么我需要这样做，<span>和.navbar > li > a:hover, .navbar > li > a:focus{ background: white; color: #333; }是内联元素。

{{1}}

为什么伪类重点工作？

Answer 1

如果您想更改链接颜色：

Vue.component('about-us', function(resolve, reject){
    // Load the template with ajax
    $.post(ajax_url, {'action': 'get_about_page'}, function(r){
        r = JSON.parse(r);

        // Save the template string
        if( r.success ) {
            // Resolve callback for Vue
            resolve({
              template: r.data
            });
        } else {
          reject("Unable to define component!")
        }
    });
});

不

.navbar > li > a{
  color: red;
}

所以为链接元素而不是li添加CSS。你不需要跨度。焦点有效，因为你为焦点状态的链接元素编写了css。

Answer 2

假设你的HTML是这样的

<ul>
<li><a href="http://www.thesite.net>This Site</a></li>
</ul>

要更改链接的文本颜色，css很简单

li a{ color: red;}

我还建议添加悬停颜色：

li a:hover{color: blue;}

如何在HTML中更改链接标记文本的颜色？

2 个答案: