CSS! 각 링크 상태에 대해 동일한 속성을 반복해야합니까? (링크, 방문, 호버… 등)?

StackOverflow https://stackoverflow.com/questions/1616034

  •  06-07-2019
  •  | 
  •  

문제

각 링크 유형에서 변경되지 않는 속성을 반복하는 것이 필요하거나 나쁜 관행입니까? 이와 같이:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

디스플레이 블록이 각각에 있어야합니까? 아니면 나쁜 연습입니까? 또한 링크 상태를 체인 할 수 있습니까? 이와 같이:

a:hover, a:active {display: block; width: 50px; color: #FFF}

또한 링크에 추가 된 ID/클래스가있는 경우 기본 스타일을 먼저 상속 한 다음 특정 ID/클래스를 변경해야합니까? 이와 같이:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

.menu 링크가 a : 링크에서 디스플레이와 너비를 얻고 색상을 변경합니까?

이 모든 것을 지우는 데 도움을 주셔서 감사합니다!

도움이 되었습니까?

해결책

링크 상태를 체인 할 수 있습니다.

: 링크 및 : 방문은 링크의 가장 기본적인 정의입니다. 링크에 클래스 나 ID가있는 경우에도 페이지의 모든 링크에 표시됩니다.

다음과 같이 말했습니다 : 호버 및 활성은 디스플레이가 필요하지 않습니다 : 블록, 선언 한 경우 : 링크 및 : 방문.

다른 팁

속성을 반복 할 필요가 없으며, "나쁜 연습"자체인지 확실하지 않지만 확실히 최적화 할 수있는 것입니다.

{display : block; 너비 : 50px} 그리고 이것은 모든 상태를 포괄합니다 (하나가 다른 곳에서 다르게 설정되지 않는 한, 그렇습니다. 또한 상태를 체인 할 수 있어야합니다.

그리고 당신이 정확히 맞습니다. 그들은 요소 유형에 할당 된 스타일을 상속하지만 ID/클래스 이름 변수가 설정되면 우선합니다.

Ben의 답변에 따라 :

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top