[css] CSS에서 별표 선행 속성은 무엇을 의미합니까?

Program / 글쓴이

오늘 css 파일을보고 다음 규칙 세트를 발견했습니다.

div.with-some-class {
    display:block;
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

* padding 및 * line-height에서 별표는 무엇을 의미합니까?

감사.

답변

이것은 “밑줄 해킹”과 같은 줄에있는 “별 속성 해킹”입니다. IE가 무시하는 속성 앞에 정크를 포함합니다 (*는 IE 7까지 작동하고 _는 IE 6까지 작동 함).

답변

CSS에서? 아무것도; 오류입니다.

일부 Internet Explorer 버전의 버그로 인해 잘못된 속성 이름을 올바르게 무시하지 않으므로 이러한 브라우저에 특정한 CSS를 제공하는 한 가지 방법입니다.

조건부 주석을 사용하는 것이 더 명확하고 안전합니다.

답변

별표 문자는 CSS에서 유효한 와일드 카드입니다. 이를 단독으로 사용하면 DOM의 모든 요소 노드에 대해 다음 CSS 속성이 사용됩니다. 예:

*{color:#000;}

위의 속성은 모든 DOM 요소에 적용되므로 CSS의 자연스러운 계단식 연결이 해제됩니다. 해당 타겟팅이 고유 한 식별자 참조를 시작하는 DOM 요소를 구체적으로 준비하여 재정의 할 수 있습니다. 예:

#uniqueValue div strong{color:#f00;}

위의 속성은 와일드 카드를 재정의하고 id 속성 값이 “uniqueValue”인 요소 내부의 div에서 발생하는 모든 강력한 요소의 텍스트를 만듭니다.

첫 번째 예와 같이 보편적으로 적용되는 와일드 카드를 사용하는 것은 재설정 스타일 시트를 작성하는 빠르고 더러운 방법이 될 수 있습니다. 와일드 카드 이후의 세분화 된 표현 정의는 매우 부풀어 오른 스타일 시트를 만들 가능성이 높기 때문에 빠르고 더럽습니다. 와일드 카드를 사용하려면 다음과 같이보다 구체적으로 사용하는 것이 좋습니다.

* strong{color:#f00;}

위의 예는 고유 식별자로 지정되지 않은 다른 CSS 속성에 관계없이 모든 강력한 요소의 텍스트를 빨간색으로 만듭니다. 이것은 “! important”선언을 사용하는 것보다 훨씬 더 안전한 것으로 간주됩니다. 그 선언은 의도 된 동작의 자연스러운 기능을 방해하는 것으로 알려져 있고 유지 보수의 악몽입니다.

예제의 별표는 속성 선언, 중괄호 안에 들어가는 코드 내에서 발생하는 것처럼 보이므로 잘못된 위치에 있으며 오류가 발생할 수 있습니다.

답변

이것은 IE7의 해킹입니다.

이것을 쓰면 :

.test {
    z-index: 1;
    *z-index: 2;
}

W3C 표준 <div class="test"></div>HTMLElement 를 존중하는 모든 네비게이터 z-index: 1에서 IE7의 경우이 요소는 z-index: 2.

이것은 표준이 아닙니다.

W3C 표준으로 동일한 결과를 얻으려면 다음 단계를 따르십시오.

  • Internet Explorer 조건부 주석을 추가합니다 (다른 모든 탐색에 대한 간단한 HTML 주석이므로 표준 방식입니다).

    <!-[IE 7 인 경우]> <html lang = “fr”class = “ie7”> <! [endif]->

    <!-[if gt IE 7]> <!-> <html lang = “fr”> <!-<! [endif]->

그리고 다음과 같은 이전 규칙을 사용하십시오.

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}

답변