CSS 클래스의 순서를 지정하는 방법은 무엇입니까?

113

CSS와 class속성 에 대해 약간 혼란 스럽습니다 . 저는 항상 속성 값에 여러 클래스를 지정하는 순서가 의미가 있다고 생각했습니다. 나중 클래스는 이전의 정의를 덮어 쓸 수 있거나 덮어 써야하지만 작동하지 않는 것 같습니다. 예를 들면 다음과 같습니다.

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

세 번째 예제 class="basic extra"에는 파란색 테두리 가 있어야합니다. 추가로 지정된 테두리가 기본 테두리를 덮어 쓸 것이기 때문입니다.

우분투 9.04에서 FF 3을 사용하고 있습니다.

html css

— 팀 뷔테
소스

246

속성을 덮어 쓰는 순서는 클래스가 class속성에 정의 된 순서가 아니라 CSS에 나타나는 위치에 의해 결정됩니다 .

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

스 니펫 확장

의 텍스트 div가 표시 green되고 표시 되지 않습니다 red. 때문에 .myClass2보다 CSS 정의에 더 아래입니다 .myClass1. class속성 에서 클래스 이름의 순서를 바꾸면 아무것도 변경되지 않습니다.

— Zoidberg
소스

14

왜 이런 식으로 구현했는지 이해할 수 없습니다. 재미있게도 CSS가 할 수있는 대부분의 다른 작업에 대한 제 의견이기도합니다.

— byxor

@ 규칙이 계단식 이기 때문 입니다. 그들은 양식 위에서 아래로, 왼쪽에서 오른쪽으로 적용됩니다. 나에게 의미가 있습니다

— O-9

27

속성 의 클래스 순서 는 관련이 없습니다. class속성의 모든 클래스 는 요소에 동일하게 적용됩니다.

문제는 스타일 규칙 이 .css 파일에 표시되는 순서 입니다. 귀하의 예에서는 가능한 한 규칙이 우선적으로 적용 되도록 .basic뒤에옵니다 ..extra.basic

당신이 (그것의 것으로, 예를 들면 세 번째 가능성을 제공하려면 .basic하지만 것을 .extra규정이 계속 적용한다), 당신은 다른 클래스를 발명해야합니다 .basic-extra명시 적으로 제공하는, 아마도.

— VoteyDisciple
소스

4

이것은 할 수 있지만 선택기에 약간의 창의성을 가져야합니다. 속성 선택기를 사용하여 "시작", "끝", "포함"등과 같은 항목을 지정할 수 있습니다. 동일한 마크 업을 사용하지만 속성 선택기를 사용하는 아래 예를 참조하십시오.

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

스 니펫 확장

— TravisV
소스