CSS 클래스 사용

Question

<td class="blue"> 
    <a href="lnk1.aspx">Hi1</a> 
    <a href="lnk2.aspx">Hi2</a> 
    <a href="lnk3.aspx">Hi3</a> 
    <div>Not Blue</div> 
</td> 

Hi1, Hi2 및 Hi3을 파란색으로 만들기 위해 태그의 클래스 ("파란색")를 원합니다.

그래서 그 수업의 책임자는 무엇이되어야합니까?

???? 
{ 
    color:blue; 
} 

Answer 1

후손 선택기 사용 :

td.blue a { 
    color: blue; 
} 

을 또는 당신은 단지 바로 아이들을 위해 원하는 경우 아이 선택기 :

td.blue > a { 
    color: blue; 
} 

참고 자료 :

대부분의 브라우저에서 지원
• 선택기 : 일부 브라우저 및합니다 (DOM와의 상호 작용을위한) 다양한 자바 스크립트 라이브러리가 지원 CSS 2.1
• 최근 선택기 : CSS3 Selectors

Answer 2

이보십시오.

td.blue a { 
    color: #0000FF; 
} 

이렇게하면 td 태그 내에있는 모든 태그를 파란색으로 설정합니다.

Answer 3

다음을 사용하십시오. 즉, 의 클래스 이름을 가진 td 요소 내의 모든 a 요소는 파란색으로 표시되어야합니다. 당신은 색상을 변경하기로 결정 나중에 경우 -

td.blue a { 
    color:blue; 
} 

그러나, 당신은 ('센터' '블루'또는 '대담한'또는 같은) 당신의 CSS 클래스를 스타일의 고유 이름을 제공하기 위해 현명 의미 점에 유의해야한다 빨강 일 경우 blue 클래스에 대한 모든 참조를 red (잠재적으로 많은 작업)으로 변경하거나 이해가 안되는 정말로 혼란스러운 클래스 이름으로 남겨 두어야합니다.

문제의 요소가 무엇을 의미하는지 후에 클래스의 이름을 지정하십시오. 따라서이 경우 예를 들어 td.links 일 수 있습니다.

Answer 4

CSS 선택기는 blue 클래스와 그 아래에있는 a 태그를 모두 참조해야합니다.

당신은 또한 고려할 수있는 다른 구문이 있음을

.blue a { 
    color:blue; 
} 

참고 :

.blue>a { 
    color:blue; 
} 

참고 >이 예에서는 .blue 사이 a가. 두 예제 모두 주어진 HTML 코드에서 작동하지만이 버전은 blue의 즉치 하위 인 <a> 태그에만 영향을주기 때문에 첫 번째 버전보다 더 구체적입니다. 즉, <div> 안에 <a> 태그가있는 경우 첫 번째 버전이 영향을 미치지 만이 버전은 그렇지 않습니다.

IE6에서는 > 선택기를 지원하지 않으므로 IE6 사용자를 지원해야하는 경우 첫 번째 버전을 사용해야합니다.다행스럽게도 IE6 사용자는 점점 줄어들고 있지만 아직까지는 일부 사용자가 있습니다.

다른 하나 : 실제 색상을 나타내는 클래스 이름을 사용하지 않는 것이 좋습니다. 일반적으로 menulink 또는 이와 비슷한 이름으로 지정하는 것이 좋습니다.

이유가 무엇인가요? 미래에 사이트를 조금 변경하고 새 버전으로 다시 만들고 싶다고 상상해보십시오. 어쩌면 새로운 기업 컬러가 새롭게 나올 것입니다. 도대체 무엇이. HTML 코드를 변경하지 않고도 그렇게 할 수 있습니다. CSS 업데이트 :

.blue a { 
    color:red; 
} 

...하지만 이제는 CSS가 적합하지 않습니다. menulink이라면 시간이 지남에 따라 상황이 바뀌더라도 해당 클래스가 무엇을 의미하는지 항상 알 수 있습니다.