CSS 클래스 및 하위 클래스

102

작동하지 않는 것 같아서 내가하는 일 외에 다른 일을 할 수 있습니까? 클래스 아래에있는 하위 클래스를 사용하여 해당 class.subclass에 대해 특별히 CSS를 사용할 수 있기를 원합니다.

CSS

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

HTML

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

그래서 부모 css 클래스 "area1", "area2"아래의 요소에 대해 class = "item"을 사용할 수 있습니다. class = "area1 item"을 사용하여이 작업을 수행 할 수 있다는 것을 알고 있지만 왜 그렇게 장황해야하는지 이해할 수 없습니다. CSS 하위 클래스가 정의하기 위해 어떤 부모 클래스 아래에 있는지 살펴보아야하지 않습니까?

참고 : 이것은 IE (현재 7 사용)에서 작동하지만 FF에서는 작동하지 않으므로 이것이 CSS 표준 방식이 아니라고 가정합니다.

css

— 라이언 애보트
소스

183

공백을 추가하면됩니다.

.area2 .item
{
    ...
}

— 차드 버치
소스

나는 정말로 서브 클래스를 직접 사용하지 않는다 ... 누군가 이것이 필요한 이유를 나에게 줄 수 있는가?

— patricksweeney

2

서브 클래스는 적절한 곳에 CSS 규칙을 추가하는 또 다른 방법입니다. 기본 클래스를 가질 수 있지만 문서의 위치에 따라 요소에 대한 규칙을 변경할 수 있습니다.

— Matt Howell

74

참고로, 위와 같이 두 개의 선택기가 함께 연결된 규칙을 정의 할 때 :

.area1.item
{
    color:red;
}

그 뜻은:

"area1"및 "item"클래스가 모두있는 모든 요소에이 스타일을 적용하십시오.

예 :

<div class="area1 item">

슬프게도 IE6에서는 작동하지 않지만 그것이 의미하는 바입니다.

— 매트 하웰
소스

1

설명 해주셔서 감사합니다!

— F-3000

나는 이것이 고대라는 것을 알고 있지만 "area1"및 "item"대신 "area1"또는 "item"을 의미합니까? 그것은 상당한 차이를 만듭니다.

— Mgamerz 2014 년

이것에 대해 많이 감사합니다. 나는 이것을 알아 내기 위해 고개를 젓고있었습니다.

— user3547774 2016 년

26

귀하의 문제는 CSS에서 두 클래스 사이에 누락 된 공간 인 것 같습니다.

.area1.item
{
    color:red;
}

해야한다

.area1 .item
{
    color:red;
}

— 앵무새
소스

14

자녀 만 선택하도록 하시겠습니까? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

— MrChrister
소스

1

내가 생각했던 것은 아니지만 이것은 직접적인 아이들만을 원한다면 좋은 정보입니다. 감사!

— Ryan Abbott

그것에 대해 몰랐습니다. MrChrister에 감사드립니다

— Sebastian Sastre

10

.area1과 .item 사이에 공백을 넣으십시오. 예 :

.area1 .item
{
    color:red;
}

이 스타일은 area1 클래스가있는 요소 내의 클래스 항목이있는 요소에 적용됩니다.

— M4N
소스

8

수업 사이에 공백을 두십시오.

.area1 .item
{
    ...
}

다음은 CSS 선택자에 대한 아주 좋은 참조입니다 .

— mbillard
소스

6

위의 kR105의 답변에 이어 :

내 문제는 OP (Original Poster)와 비슷하고 테이블 외부에서만 발생했기 때문에 하위 클래스는 상위 클래스 (테이블) 범위 내에서 호출되지 않고 외부에서 호출되었으므로 선택자를 추가해야했습니다. , kR105가 언급했듯이.

문제는 다음과 같습니다. 각각 테두리 반경 (HTML5), 패딩 및 여백이 동일한 두 개의 상자 (div)가 있지만 서로 다른 색상을 만들어야했습니다. 각 색상 클래스에 대해이 3 개의 매개 변수를 반복하는 대신 "슈퍼 클래스"에 border-radius / padding / margin을 포함하고 그 차이를 표현하기 위해 개별 "하위 클래스"만 원했습니다 (실제로 하위 클래스가 아니므로 각 주위에 큰 따옴표를 사용합니다.- 나중에 내 게시물 참조). 작동 방식은 다음과 같습니다.

HTML :

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

CSS :

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

누군가 이것이 도움이되기를 바랍니다.

— 막시무스
소스

3

이것이 CSS의 중추 인 Cascading Style Sheets 의 "cascade"입니다 .

CSS 규칙을 한 줄로 작성하면 구조를 더 쉽게 볼 수 있습니다.

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

여러 클래스를 사용하는 것도 CSS의 좋은 중급 / 고급 사용입니다. 안타깝게도 크로스 브라우저 코드를 작성할 때 이러한 사용을 제한하는 잘 알려진 IE6 버그가 있습니다.

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 은 다중 클래스 규칙의 첫 번째 선택기를 무시 하므로 IE6은 실제로 .area1.larger 규칙을 다음과 같이 적용합니다.

/*.area1*/.larger { ... }

모든 .larger 요소에 영향을 미칩니다.

하나의 깨끗한 크로스 브라우저 CSS 파일을 원한다면 CSS의 해당 기능을 거의 사용하지 않도록하는 IE6의 매우 불쾌하고 불행한 버그 (여러 개 중 하나)입니다.

해결책은 CSS 클래스 이름 접두사를 사용하여 일반 클래스 이름과 충돌하지 않도록하는 것입니다.

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

하나의 클래스 만 사용할 수도 있지만 그렇게하면 .area1Larger가 .area1에만 영향을 미친다는 것을 알면서도 의도 한 로직에 CSS를 유지할 수 있습니다.

1

예를 들어 div에 적용하는 클래스는 해당 div의 스타일 요소에 대한 참조 지점으로 사용할 수 있습니다.

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

수퍼 시맨틱하려면 클래스를 테이블로 이동해야합니다.

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

— 조지 위스 컴
소스

1

이와 같은 요소 내에 두 개의 클래스를 가질 수도 있습니다.

<div class = "item1 item2 item3"></div>

클래스의 각 항목은 자체 클래스입니다.

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
소스

1

kR105 작성 :

이와 같은 요소 내에 두 개의 클래스를 가질 수도 있습니다.

<div class = "item1 item2 item3"></div

계단식 스타일의 원칙에 따라 마지막 스타일이 우선하므로이 값의 가치를 알 수 없습니다. 예를 들어 이전 예제에서 HTML을 다음과 같이 변경 한 경우

 <div class="box1 box2"> Hello what is my color? </div>

.box2의 스타일이 이러한 값을 할당하므로 상자의 테두리와 텍스트는 파란색이됩니다.

또한 이전 게시물에서 선택자를 추가 하는 것은 효과가 비슷하지만 클래스 내에서 하위 클래스 를 만드는 것과 동일하지 않다는 점을 강조 했어야 했습니다 (이 스레드의 첫 번째 솔루션).

— 막시무스
소스