Якорный тег наследуется от непреднамеренного элемента - PullRequest
Новая
       19

Якорный тег наследуется от непреднамеренного элемента

1 голос
/ 15 мая 2019

У меня есть фрагмент следующего кода и теги из заголовка, наследующие стили тега от основного.
Я знаю, что могу предотвратить добавление классов к каждому тегу, но есть ли другой способ решить это?

    header li{
      display: inline-block;
    }
    header a:link, a:visited, a:active{
      text-decoration: none;
      color: #fff;
    }
    header a:hover{
      color: #333;
    }
    
    main a:link, a:visited, a:active{
      color: #0ba39c;
    }
    main a:hover{
      color: #252525;
    }
    <header>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </header>
    
    <main>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </main>

Я также пытался указывать это как: header> ul> li> a: ссылка ... но это также не работает.
Iвидел на сайтах много разных стилей якорей без дополнительных классов, поэтому держу пари, что я что-то упустил.

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

CSS-запятая используется для отображения нескольких отдельных селекторов.

Так что вместо 

header a:link, a:visited, a:active {
    ...
}

(что приводит к 3 селекторам header a:link, a:visited и a:active)

полный селектор для каждого состояния ссылки должен быть объявлен так: 

header a:link,
header a:visited,
header a:active {
    ...
}

(что приводит к 3 селекторам header a:link, header a:visited и header a:active)

То же самое относится и к main. Я обновил ваш пример различимыми цветами: 

    header li{
      display: inline-block;
    }
    header a:link,
    header a:visited,
    header a:active {
      text-decoration: none;
      color: red;
    }
    header a:hover{
      color: yellow;
    }
    
    main a:link,
    main a:visited,
    main a:active {
      color: green;
    }
    main a:hover{
      color: blue;
    }
    <header>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </header>
    
    <main>
      <ul>
        <li>
          <a href="#">First element</a>
        </li>
        <li>
          <a href="#">Second element</a>
        </li>
      </ul>
    </main>
0 голосов
/ 15 мая 2019

Вы и используете их атрибут для вызова определенного тега привязки таким образом 

a[href="abc"]{
    /*your css property*/
}
...