Question

我在<i>内的html中有一个标记。我已经在HTML中的所有<a>标记中应用了一些样式。但我想分隔<a>标记中的任何<i>标记。我该怎么办？

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;
}

用于exepted链接。

也可以使用: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伪类

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

这样可以使a标签中不包含i标签的所有i a:linked { color: initial; font-family: initial; font-size: initial; font-weight: initial; } ...标签都被赋予样式，而那些不能获得它们的标签。

否则你必须重置/覆盖样式

{{1}}

Answer 4

首先要在标签内添加不同的样式我只是对所有后代使用'i a'或'i＆gt; a'对于直接的孩子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＆gt;相反。

如何将css样式应用于标记？

4 个答案: