[css] CSS 클래스가 하나 이상의 다른 클래스를 상속 할 수 있습니까?

나는 오랫동안 웹 프로그래머가 되어서이 질문에 대한 답을 알지 못하는 것에 대해 바보 같은 느낌을 느낍니다. 실제로 그것이 가능하기를 희망하며 대답이라고 생각하는 것보다는 (아직 불가능합니다) 몰랐습니다. .

내 질문은 다른 CSS 클래스 (또는 둘 이상)에서 “상속”하는 CSS 클래스를 만들 수 있는지 여부입니다.

예를 들어 다음과 같이 가정 해 봅시다.

.something { display:inline }
.else      { background:red }

내가하고 싶은 것은 다음과 같습니다.

.composite
{
   .something;
   .else
}

“.composite”클래스는 인라인으로 표시되고 배경은 빨간색입니다.

답변

LESS 와 같은 도구가 있습니다.이 도구 를 사용하면 설명과 유사한 추상화 수준으로 CSS를 작성할 수 있습니다.

이 “Mixins”라고 부르는 사람

대신에

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

넌 말할 수있다

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

답변

단일 DOM 요소에 여러 클래스를 추가 할 수 있습니다 (예 :

<div class="firstClass secondClass thirdclass fourthclass"></div>

이후 클래스에서 제공되는 규칙 (또는보다 구체적인 규칙)이 재정의됩니다. 따라서이 fourthclass예에서는 우선합니다.

상속은 CSS 표준의 일부가 아닙니다.

답변

예, 그러나 해당 구문과 정확히 일치하지는 않습니다.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

답변

공통 속성을 함께 유지하고 특정 (또는 대체) 속성을 다시 지정하십시오.

/*  ------------------------------------------------------------------------------ */
/*  Headings */
/*  ------------------------------------------------------------------------------ */
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

답변

요소는 여러 클래스를 사용할 수 있습니다.

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

그리고 그것은 불행히도 거의 다가올 것입니다. 언젠가 클래스 별명과 함께이 기능을보고 싶습니다.

답변

아니요 당신은 같은 것을 할 수 없습니다

.composite
{
   .something;
   .else
}

이것은 OO 의미에서 “클래스”이름이 아닙니다. .something그리고 .else아무것도 더 단지 선택기입니다.

그러나 요소에 두 개의 클래스를 지정할 수 있습니다

<div class="something else">...</div>

아니면 다른 형태의 상속을 살펴볼 수도 있습니다

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

단락의 배경색과 색은 .foo스타일 이 지정된 둘러싸는 div의 설정에서 상속됩니다 . 정확한 W3C 사양을 확인해야 할 수도 있습니다. inherit어쨌든 대부분의 속성에는 기본값이지만 전부는 아닙니다.

답변

나는이 같은 문제에 부딪 쳤고 JQuery 솔루션을 사용하여 클래스가 다른 클래스를 상속받을 수있는 것처럼 보이게되었습니다.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

“composite”클래스를 가진 모든 요소를 찾고 “something”및 “else”클래스를 요소에 추가합니다. 따라서 다음과 같이 <div class="composite">...</div>끝납니다.
<div class="composite something else">...</div>