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을 사용하고 있습니다.
답변
속성을 덮어 쓰는 순서는 클래스가 class속성에 정의 된 순서가 아니라 CSS에 나타나는 위치에 의해 결정됩니다 .
.myClass1 {color:red;}
.myClass2 {color:green;}<div class="myClass2 myClass1">Text goes here</div>의 텍스트 div가 표시 green되고 표시 되지 않습니다 red. 때문에 .myClass2보다 CSS 정의에 더 아래입니다 .myClass1. class속성 에서 클래스 이름의 순서를 바꾸면 아무것도 변경되지 않습니다.
답변
속성 의 클래스 순서 는 관련이 없습니다. class속성의 모든 클래스 는 요소에 동일하게 적용됩니다.
문제는 스타일 규칙 이 .css 파일에 표시되는 순서 입니다. 귀하의 예에서는 가능한 한 규칙이 우선적으로 적용 되도록 .basic뒤에옵니다 ..extra.basic
당신이 (그것의 것으로, 예를 들면 세 번째 가능성을 제공하려면 .basic하지만 것을 .extra규정이 계속 적용한다), 당신은 다른 클래스를 발명해야합니다 .basic-extra명시 적으로 제공하는, 아마도.
답변
이것은 할 수 있지만 선택기에 약간의 창의성을 가져야합니다. 속성 선택기를 사용하여 “시작”, “끝”, “포함”등과 같은 항목을 지정할 수 있습니다. 동일한 마크 업을 사용하지만 속성 선택기를 사용하는 아래 예를 참조하십시오.
[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"/>