[css] CSS 클래스 및 하위 클래스

작동하지 않는 것 같아서 내가하는 일 외에 다른 일을 할 수 있습니까? 클래스 아래에있는 하위 클래스를 사용하여 해당 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 표준 방식이 아니라고 가정합니다.

답변

공백을 추가하면됩니다.

.area2 .item
{
    ...
}

답변

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

.area1.item
{
    color:red;
}

그 뜻은:

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

예 :

<div class="area1 item">

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

답변

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

.area1.item
{
    color:red;
}

해야한다

.area1 .item
{
    color:red;
}

답변

자녀 만 선택하도록 하시겠습니까? 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;
}

답변

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

.area1 .item
{
    color:red;
}

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

답변

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

.area1 .item
{
    ...
}

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

답변

위의 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}

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