div 内的超链接，并在 HTML/CSS 中的标签内分配了一个类

发布于 2024-12-15 10:19:29 字数 1464 浏览 0 评论 0原文

目前，我正在尝试实现我的第一个 HTML5 应用程序，但我遇到了一些有关 HTML/CSS 的常见问题，特别是使用 header 标记。

通常我将主标签放在CSS规则的开头，因此我可以控制每个属性并且不混合它们中的任何一个。

现在我有这个 CSS 代码：

header div.followUs { float:right; font:Georgia, "Times New Roman", Times, serif;    color:#B2B2B2; font-style:italic }
header div.followUs a,a:link,a:active,a:visited { color:orange }

header nav { clear:right; float:right; margin-top:20px }
header nav ul li { float:left; margin-right: 25px; text-transform:uppercase; font-weight:bold }
header nav ul li:last-child { margin-right: 0 }
header nav ul li a { text-decoration:none }

我的 HTML 代码是：

<header>
<div class="header-inner clearfix">
    <h1 class="logo">Client KickOff</h1>
    <div class="followUs">Segue-nos no <a href="#">Twitter</a> and <a href="#">Facebook</a>.</div>
    <nav>
        <ul>
            <li><a href="/html/">Notícias</a></li>
            <li><a href="/html5/">Quem Somos</a></li>
            <li><a href="/css/">Os Nossos Produtos</a></li>
            <li><a href="/css3/">O Nosso Portefólio</a></li>
            <li><a href="/js/">Contacte-nos!</a></li>
            </ul>
    </nav>
</div>
</header>

它给出与 div 相同的颜色，并将 followUs 类应用于导航项。

有什么想法吗？

原文

Currently I am trying to implement my first HTML5 application, but I am having some general issues regarding HTML/CSS, specially using header tag.

Usually I put the main tag at the beginning of the CSS rule, therefore I could control each property and to don't mix any of them.

Right now I have this CSS code:

header div.followUs { float:right; font:Georgia, "Times New Roman", Times, serif;    color:#B2B2B2; font-style:italic }
header div.followUs a,a:link,a:active,a:visited { color:orange }

header nav { clear:right; float:right; margin-top:20px }
header nav ul li { float:left; margin-right: 25px; text-transform:uppercase; font-weight:bold }
header nav ul li:last-child { margin-right: 0 }
header nav ul li a { text-decoration:none }

And my HTML code is:

<header>
<div class="header-inner clearfix">
    <h1 class="logo">Client KickOff</h1>
    <div class="followUs">Segue-nos no <a href="#">Twitter</a> and <a href="#">Facebook</a>.</div>
    <nav>
        <ul>
            <li><a href="/html/">Notícias</a></li>
            <li><a href="/html5/">Quem Somos</a></li>
            <li><a href="/css/">Os Nossos Produtos</a></li>
            <li><a href="/css3/">O Nosso Portefólio</a></li>
            <li><a href="/js/">Contacte-nos!</a></li>
            </ul>
    </nav>
</div>
</header>

It is giving the same color as the div with the followUs class applied to the navigation items.

Any ideias?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

又爬满兰若 2024-12-22 10:19:29

header div.followUs a,a:link,a:active,a:visited { color:orange }

字面意思是这样的：

header div.followUs a { color: orange }
a:link { color: orange }
a:active { color: orange }
a:visited { color: orange }

因此导航中的链接与单个 a:link 规则匹配，因为它没有指定在 header 和 followUs 部分内。

您需要在每个 a: 选择器前面添加 header div.followUs。不过，您应该删除额外的 a: 选择器，因为初始 header div.followUs a 已经涵盖了所有表单。

header div.followUs a,a:link,a:active,a:visited { color:orange }

will literally mean this:

header div.followUs a { color: orange }
a:link { color: orange }
a:active { color: orange }
a:visited { color: orange }

So your links in the navigation are matching to the single a:link rule, since it is not specified to be within the header and followUs division.

You need to have the header div.followUs in front of each of the a: selectors. Although, you should just remove the extra a: selectors because the initial header div.followUs a will already cover all forms.

回复收藏 0 原文