CSS 스타일 우선 순위

CSS 선언 우선 순위에 문제가 있습니다. 내 페이지에는 규칙 및 일부 인라인 CSS 선언이있는 외부 CSS 파일이 포함되어 있으며이 규칙은 해당 규칙을 재정의해야합니다. 내 이해를 위해 인라인 스타일 선언은 외부 CSS 선언을 무시해야합니다. 그러나 크롬에서 페이지를 볼 때 테이블의 두 번째 행은 내부 스타일 선언에 정의 된대로 빨간색으로 표시되어야 할 때 파란색으로 표시됩니다.CSS 스타일 우선 순위

tbody tr:nth-child(even) td, 
tbody tr.even td 
{ 
    background: #e5ecf9; 
}

출처

2012-08-23 Jargo

당신은'_avoid_해야 important'을 - http://stackoverflow.com/questions/3706819/what-are-the-implications를 참조하십시오! -of-important-in-css – andyb

규칙 선택기 문제의 수 계산 : 여기

<html> 
<head> 
    <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection"> 
    <style type="text/css"> 
     td,tr,th 
     { 
      background: Red; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>11</td> 
      <td>22</td> 
     </tr> 
     <tr> 
      <td>aa</td> 
      <td>bb</td> 
     </tr> 
    </table> 
</body> 
</html>

는 CSS 파일의 내용이다 :

은 내가 여기 여기

실종은 HTML입니다 가장 높은 특이성을 가지고있다. CSS 특이성의

두 뛰어난 시각화 http://www.standardista.com/css3/css-specificity/ 및 http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html 있습니다

당신은 방금 가져온 규칙에 더 많은 규칙을 제공하거나 동일한 무게 (What are the implications of using "!important" in CSS? 참조)를 무시하고 대신 선택을 변경하려면 규칙에 !important을 고집하지 말아야 .

예를 들어, 다음은 모든 셀 더 자세한 규칙을 얻을 것이다이 경우 background:red

thead tr:nth-child(1n) th, tbody tr:nth-child(1n) td { 
    background:red; 
}

출처

2012-08-23 08:53:05 andyb

이 경우에는 작동하지 않습니다. 내 대답 좀 봐. :-) – Raisch

@Raisch 예 감사합니다. 그냥 로컬에서 올바른 선택기를 테스트하는 것이 었습니다 .-) – andyb

문제 없습니다. 이제 작동 할 것입니다. :-D – Raisch

를 만들 것입니다.

당신의 HTML이 시도 :

<style type="text/css" media="screen, projection"> 
    tbody tr:nth-child(even) td,tr,th 
    { 
     background: Red; 
    } 
</style>

안부가

출처

2012-08-23 09:00:12 Raisch

+1 좋은 해결책. 나의 것보다 덜 어수선하다 – andyb

', tr, th '부분은 영향을 미치지 않으며 그 역할을 쉽게 오해 할 수 있기 때문에 코드는 잘못된 것이다. 여기서 중요한 것은 충분히 큰 특이성을 사용하는 특정 'td'요소에 대한 설정입니다. –

@ JukkaK.Korpela - 알아, 나는 방금 CSS 블록을 확장했다. :-) – Raisch

CSS 스타일 우선 순위

답변

관련 문제