如何将CSS样式应用于标签？

Question

我在<i> html中有一个标签。 我已经将某些样式应用于HTML中的所有<a>标记。 但是我想分隔<i>标记中的任何<a>标记。 我该怎么做？

a.aCategory:link {
    color: #000000;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

a.aCategory:visited {
    color: #999999;
    text-decoration: none;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

a.aCategory:active {
    color: #000000;
    text-decoration: none;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

a.aCategory:hover {
    color: #999999;
    text-decoration: none;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

a.aSubCategory:link {
    color: #000000;
    text-decoration: none;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
}

a.aSubCategory:visited {
    color: #999999;
    text-decoration: none;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
}

a.aSubCategory:active {
    color: #000000;
    text-decoration: none;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
}

a.aSubCategory:hover {
    color: #999999;
    text-decoration: none;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
}

a:link {
    color: #3B73B9;
    text-decoration: none;
}

a:visited {
    color: #3B73B9;
    text-decoration: none;
}

a:active {
    color: #3B73B9;
    text-decoration: none;
}

a:hover {
    color: #064D6E;
    text-decoration: underline;
}

谢谢。

Answer 1

您可以使用非常规的CSS选择器：

a[href="http://example.com"] {
  color: #1f6053;
}

有关示例链接。

也可以使用:not ：

a:not(#example) {
   color: blue;
}

并插入到目标元素id="example"

也：

i > a {
   color: red;
}

选择了目标<a>

Answer 2

您可以使用CSS子选择器将特定样式应用于标签的子代。

例如，在您的情况下：

i > a { /* your styles */ } /* will select immediate child */
i a { /* your styles */ } /* will select all nested children */

但是，如果您使用这些“ a”标签选择器覆盖了很多规则，那么重新考虑CSS可能是个好主意。

Answer 3

如果你可以使用CSS3选择使用：没有前缀，以您的伪类a标签样式

*:not(i) > a { }
*:not(i) > a.aSubCategory { }
...

这样可以使所有不在i标签中的标签都具有样式，而那些没有a标签则没有样式。

否则，您将不得不重置/覆盖样式

i a:linked {
    color: initial;
    font-family: initial;
    font-size: initial;
    font-weight: initial;   
}
...

Answer 4

第一件事是向内部的标签添加不同的样式，我只对所有后代使用“ ia”，对i的直接子项a使用“ i> a”。

第二件事是您应该为所有标签编写样式之后再编写此样式。

a.aCategory:link {
   color: #000000;
   font-family: Arial;
   font-size: 12px;
   font-weight: bold;
}
i a.aCategory:link{
   //enter your style here
}
a.aCategory:visited {
   color: #999999;
   text-decoration: none;
   font-family: Arial;
   font-size: 12px;
   font-weight: bold;
}
i a.aCategory:visited{
   //enter your style here
}
a.aCategory:active {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 12px;
   font-weight: bold;
}
i a.aCategory:active{
   //enter your style here
}
a.aCategory:hover {
   color: #999999;
   text-decoration: none;
   font-family: Arial;
   font-size: 12px;
   font-weight: bold;
}
i a.aCategory:hover{
   //enter your style here
}
a.aSubCategory:link {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a.aSubCategory:link{
   //enter your style here
}
a.aSubCategory:visited {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a.aSubCategory:visited{
   //enter your style here
}
a.aSubCategory:active {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a.aSubCategory:active{
   //enter your style here
}
a.aSubCategory:hover {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a.aSubCategory:hover{
   //enter your style here
}
a:link {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a:link{
   //enter your style here
}
a:visited {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a:visited{
   //enter your style here
}
a:active {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a:active{
   //enter your style here
}
a:hover {
   color: #000000;
   text-decoration: none;
   font-family: Arial;
   font-size: 11px;
   font-weight: bold;
}
i a:hover{
   //enter your style here
}

注意：在上面的代码中，如果您要对唯一的子标签应用不同的样式（如果我使用i标签，则使用i> a代替）。