다른 CSS 규칙 내에서 하나의 CSS 규칙을 참조 할 수 있습니까?

다른 CSS 규칙 내에서 하나의 CSS 규칙을 참조 할 수 있습니까?

---

예를 들어 다음 HTML이있는 경우 :

<div class="someDiv"></div>

그리고이 CSS :

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

스크립팅 언어에서 스크립트 상단에 자주 사용되는 일반 함수가 있고 해당 함수를 사용해야 할 때마다 매번 모든 코드를 반복하는 대신 함수를 호출하기 만하면됩니다.

---

아니요, 한 규칙 집합을 다른 규칙 집합에서 참조 할 수 없습니다.

할 수 있습니다,하지만, 재사용 스타일 시트에서 여러 규칙 세트에 선택기 및 (가 하나의 규칙 세트에 여러 선택기를 사용하여 쉼표로 구분 ).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

단일 HTML 요소에 여러 클래스를 적용 할 수도 있습니다 (클래스 속성은 공백으로 구분 된 목록을 사용함).

<div class="opacity radius">

이러한 접근 방식 중 하나가 문제를 해결해야합니다.

그것은 것 아마 도움이 설명 클래스 이름을 사용하면 왜 요소가 대신 스타일되어야한다 방법 이 스타일되어야한다. 스타일 시트에 방법 은 그대로 둡니다 .

---

SASS 와 같은 일종의 확장 CSS를 사용하지 않는 한 불가능합니다 . 그러나이 두 가지 추가 클래스를 .someDiv.

.someDiv고유 한 경우 ID를 제공하고 ID를 사용하여 CSS에서 참조하도록 선택합니다.

---

약간의 jquery를 기꺼이 사용할 수 있다면 다음과 같이 할 수 있습니다.

$('.someDiv').css([".radius", ".opacity"]);

이미 페이지를 처리하는 자바 스크립트가 있거나 <script> 태그로 묶을 수 있습니다. 그렇다면 위의 내용을 문서 준비 기능으로 감 쌉니다.

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

I recently came across this while updating a wordpress plugin. The them has been changed which used a lot of "!important" directives across the css. I had to use jquery to force my styles because of the genius decision to declare !important on several tags.

---

You can easily do so with SASS pre-processor by using @extend.

someDiv {
    @extend .opacity;
    @extend .radius;
}

Ohterwise, you could use JavaScript (jQuery) as well:

$('someDiv').addClass('opacity radius')

The easiest is of course to add multiple classes right in the HTML

<div class="opacity radius">

---

Just add the classes to your html

<div class="someDiv radius opacity"></div>

참고URL : https://stackoverflow.com/questions/4060405/is-it-possible-to-reference-one-css-rule-within-another