Блог

У меня есть тег в моем html внутри <i> . Я уже применяю некоторые стили ко всем <a> тегам в моем HTML. Но я хотел бы отделить любой <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;
}
 

Спасибо.

Вы можете использовать ненормальный селектор css:

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

для исключенных ссылок.

Также можно использовать :not :

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

И вставить в целевой элемент id="example"

Также:

 i > a {
   color: red;
}
 

выбран целевой <a>

Первое, что нужно сделать, это добавить другой стиль к тегу внутри, я просто использую ‘i a’ для всех потомков или ‘i> a’ для прямого дочернего элемента i.

Во-вторых, вы должны написать этот стиль после стиля, который вы написали для всех тегов.

 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
}
 

ПРИМЕЧАНИЕ: в приведенном выше коде, если вы хотите применить другой стиль только для дочернего тега a, если я помечаю, вместо этого используйте i> a .

Вы можете применить определенные стили к дочерним элементам тега с помощью дочерних селекторов CSS.

Например, в вашем случае:

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

Однако, если вы переписываете много правил, используя эти селекторы для тегов «a», тогда может быть хорошей идеей переосмыслить свой CSS.

Если вы можете использовать селекторы CSS3, используйте псевдокласс :not с префиксом к вашим a стилям тегов

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

Это позволит сделать так, чтобы все a теги, не входящие в i теги, получали стили, а те, которые есть, их не получали.

В противном случае вам пришлось бы сбросить / переопределить стили

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