一个 id= 而不是一个 href=答案

【问题标题】：a id= as aposed to a href=一个 id= 而不是一个 href=
【发布时间】：2018-04-15 08:35:12
【问题描述】：

我有一个布局精美的未列出列表，其中包含使用<a href=""> 的链接，但是当我添加一个需要<a id=""> 的链接时，CSS 会忽略它。

由于 CSS 仅使用 li a:link{} 定义属性，我如何让它也识别 id=？

id=swishLink 在整个站点中被多次使用，因此我无法对 swishyLink 属性进行任何更改。

我尝试了<div id=> 选项，但这意味着我必须为每个列表项创建一个 CSS 规则。

li:first-child a:link{
  text-decoration: none;
  border-top-right-radius: 2em;
  border-top-left-radius: 2em;
}
li{
  list-style-type: none;
  text-decoration: none;
  border: 2px solid white
}
li a:link{
  text-decoration: none;
  list-style-type: none;
  width: 200px;
  height:auto;
  padding: 20px;
  display: list-item;
  background: #eefbe7;
  font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
  text-align: center;
  color: green;
}
li a:visited{
  color: green;
}
li a:active{
  color:purple;
}
li:last-child a:link{
  border-bottom-right-radius: 2em;
  border-bottom-left-radius: 2em;
}
/*
 Change the link color on hover */

 li a:hover {
  text-decoration: none;
  background: green;
  color: white;
}

 <ul>
        <li>
        <a href="./"> One </a>
        </li>
        <li>
        <a id='swishyLink'> Two </a>
        </li>

        <li>
        <a href="./"> Three </a>
        </li>
        <li>
        <a href="./">  Four </a>
        </li>
        <li>
        <a href="./">  five </a>
        </li>
    </ul>

【问题讨论】：

":link CSS 伪类表示一个尚未访问过的元素。它匹配每个未访问过的、或元素有一个 href 属性。" :link - CSS | MDN

标签： css html href

【解决方案1】：

a:link 对你不利。只需使用li a

li:first-child a{
  text-decoration: none;
  border-top-right-radius: 2em;
  border-top-left-radius: 2em;
}
li{
  list-style-type: none;
  text-decoration: none;
  border: 2px solid white
}
li a{
  text-decoration: none;
  list-style-type: none;
  width: 200px;
  height:auto;
  padding: 20px;
  display: list-item;
  background: #eefbe7;
  font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
  text-align: center;
  color: green;
}
li a:visited{
  color: green;
}
li a:active{
  color:purple;
}
li:last-child a{
  border-bottom-right-radius: 2em;
  border-bottom-left-radius: 2em;
}
/*
 Change the link color on hover */

 li a:hover {
  text-decoration: none;
  background: green;
  color: white;
}

 <ul>
        <li>
        <a href="./"> One </a>
        </li>
        <li>
        <a id='swishyLink'> Two </a>
        </li>

        <li>
        <a href="./"> Three </a>
        </li>
        <li>
        <a href="./">  Four </a>
        </li>
        <li>
        <a href="./">  five </a>
        </li>
    </ul>

【讨论】：

【解决方案2】：

如果您希望您的 CSS 也适用于不是链接的 <a> 标签，则不应告诉它仅适用于链接。

听起来你不想:link。

【讨论】：