Question

In my website, I need two types of <a> tags -- one for inline links and the other for standalone links. So you can imagine I want these two types of <a> tags to be in different colors/styles.

For example, for inline links, I don't want to make them pop out too much, so I want light underlines beneath them. On the contrary, I want standalone links to pop out, so I want to color them in bright blue.

My idea is to create two tags, <a_inline> and <a>. How may I do this? I tried making a copy of <a>, renamed the copy to <a_inline>, and modified the color attribute, etc., but the thing is not clickable.

Answer 1

不要创建自己的元素，如果你这样做，那么你就不再使用HTML了。（Custom elements是一个东西，但这里不合适）。

通常，将元素组合在一起的两个工具是：

Classes + Class selectors
祖先元素与descendant combinator

使用类看起来像：

＆＃13;

a {
  color: red;
}
a.inline {
  color: yellow
}

＆＃13;

<ul>
  <li><a href="http://example.com">External link</a>
  </li>
  <li><a href="#foo" class="inline">Inline link</a>
  </li>
</ul>

＆＃13;

另一种方法是：

＆＃13;

a {
  color: red;
}
article a {
  color: yellow
}

＆＃13;

<a href="http://example.com">External link</a>

<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. <a href="#foo">Inline link</a>. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
    nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>


</article>

＆＃13;

但是，在这种特殊情况下，您已经在HTML中具有足够的区别功能，无需添加任何内容。

假设我理解正确，您的内联链接将包含href个属性，其值以#符号开头。您可以在attribute selector中使用它：

＆＃13;

a {
  color: red;
}
a[href^="#"] {
  color: yellow
}

＆＃13;

<ul>
  <li><a href="http://example.com">External link</a>
  </li>
  <li><a href="#foo">Inline link</a>
  </li>
</ul>

＆＃13;

Answer 2

您正在寻找<nav id="breadcrumb"> <a href="#1">Home</a> <a href="#2">Contact</a> <a href="#3">Some extra long name</a> <a href="#4">Email</a> </nav> 定义两个类，如

CSS classes

然后在HTML代码中，您可以随时使用。

a.one {
    // Custom style one
    color: blue;
    text-decoration: underline;
}
a.two {
    // Custom style two
    color: cyan;
    display: block;
    text-decoration: none;
}

Answer 3

要创建<a-inline>（请注意-），您需要使用JavaScript并document.registerElement

否则，您可以使用类或属性选择器执行以下操作：

＆＃13;

/* all anchors */
a{
  color:red;
}
/* .gold anchors */
a.gold{
  color:gold;
  text-decoration: underline;
}
/* ID fragment anchors */
a[href^='#']{
  color: blue;
}
/* Anchor href ends in .html */
a[href$='.html']{
  color: green;
}
/* Anchor is a http:// or https:// */
a[href^='http://'],
a[href^='https://']{
  color: fuchsia;
}

＆＃13;

<a>I don't have any href</a><br>
<a class="gold">I have a .gold</a><br>
<a href="#something">I'm an ID anchor</a><br>
<a href="./somepage.html">This is a .html link</a><br>
<a href="http://stackoverflow.com">This is a http link</a><br>

＆＃13;

定义自定义<a> tag in CSS?

3 个答案: