Lớp CSS & Lớp con

102

Có thể, ngoài những gì tôi đang làm vì nó dường như không hoạt động, để làm điều này? Tôi muốn có thể có các lớp con nằm dưới một lớp để sử dụng CSS dành riêng cho class.subclass đó.

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>

Vì vậy, tôi chỉ có thể sử dụng class = "item" cho các phần tử dưới lớp css cha "area1", "area2". Tôi biết tôi có thể sử dụng class = "area1 item" để làm cho nó hoạt động, nhưng tôi không hiểu tại sao nó phải dài dòng về nó như vậy. Lớp con css không nên xem nó thuộc lớp cha nào để xác định nó?

Lưu ý: điều này hoạt động trong IE (hiện đang sử dụng 7), nhưng trong FF thì không, vì vậy tôi cho rằng đây không phải là một cách chuẩn CSS để thực hiện điều gì đó.

css

— Ryan Abbott
nguồn

182

Chỉ cần thêm một khoảng trắng:

.area2 .item
{
    ...
}

— Chad Birch
nguồn

Bản thân tôi không thực sự sử dụng các lớp con ...... bất cứ ai có thể cho tôi một lý do mà điều này là cần thiết?

— Patricksweeney

2

Các lớp con chỉ là một cách nữa để thêm tính cụ thể bổ sung vào các quy tắc CSS của bạn nếu nó phù hợp. Bạn có thể có một lớp chính, nhưng bạn có thể thay đổi quy tắc cho một phần tử dựa trên vị trí của nó trong tài liệu.

— Matt Howell

74

FYI, khi bạn xác định một quy tắc như bạn đã làm ở trên, với hai bộ chọn được xâu chuỗi với nhau:

.area1.item
{
    color:red;
}

Nó có nghĩa là:

Áp dụng kiểu này cho bất kỳ phần tử nào có cả lớp "area1" và "item".

Nhu la:

<div class="area1 item">

Đáng buồn là nó không hoạt động trong IE6, nhưng đó là ý nghĩa của nó.

— Matt Howell
nguồn

1

Đây thực sự là thứ tôi đang tìm kiếm, cảm ơn vì đã giải thích nó!

— F-3000

Tôi biết điều này là cổ xưa nhưng ý bạn là "area1" hay "item" thay vì "area1" và "item"? Nó tạo ra một sự khác biệt đáng kể.

— Mgamerz

cảm ơn rất nhiều vì điều này, tôi đã cố gắng để tìm ra điều này.

— user3547774

26

Vấn đề của bạn dường như là thiếu khoảng trống giữa hai lớp của bạn trong CSS:

.area1.item
{
    color:red;
}

Nên là

.area1 .item
{
    color:red;
}

— Vẹt
nguồn

14

bạn có muốn chỉ chọn trẻ em không? 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
nguồn

1

Không phải những gì tôi đang nghĩ, nhưng đây là thông tin tốt nếu tôi muốn chỉ có trẻ em trực tiếp. Cảm ơn!

— Ryan Abbott

Không biết về cái đó. Cám ơn MrChrister rằng

— Sebastian Sastre

10

Chỉ cần đặt một khoảng trắng giữa .area1 và .item, ví dụ:

.area1 .item
{
    color:red;
}

kiểu này áp dụng cho các phần tử có hạng mục bên trong một phần tử có khu vực lớp1.

— M4N
nguồn

8

Chỉ cần đặt một khoảng trống giữa các lớp của bạn

.area1 .item
{
    ...
}

Đây là một tài liệu tham khảo rất tốt cho Bộ chọn CSS .

— mbillard
nguồn

6

Tiếp theo từ câu trả lời của kR105 ở trên:

Vấn đề của tôi cũng tương tự như vấn đề của OP (Original Poster), chỉ xảy ra bên ngoài một bảng, do đó, các lớp con không được gọi từ trong phạm vi của lớp cha (bảng), mà ở bên ngoài nó, vì vậy tôi phải THÊM bộ chọn , như kR105 đã đề cập.

Đây là vấn đề: Tôi có hai hộp (div), mỗi hộp có cùng bán kính đường viền (HTML5), đệm và lề, nhưng cần làm cho chúng có màu sắc khác nhau. Thay vì lặp lại 3 tham số đó cho mỗi lớp màu, tôi muốn một "lớp cha" chứa bán kính đường viền / đệm / lề, sau đó chỉ cần các "lớp con" riêng lẻ để thể hiện sự khác biệt của chúng (dấu ngoặc kép xung quanh mỗi lớp vì chúng không thực sự là lớp con - xem bài viết sau của tôi). Đây là cách nó hoạt động:

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}

Hy vọng ai đó thấy điều này hữu ích.

— cực đại
nguồn

3

Đó là xương sống của CSS, "tầng" trong Trang tính kiểu xếp tầng.

Nếu bạn viết các quy tắc CSS của mình trong một dòng, bạn sẽ thấy cấu trúc dễ dàng hơn:

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

Sử dụng nhiều lớp cũng là một cách sử dụng CSS trung cấp / nâng cao, tiếc là có một lỗi IE6 nổi tiếng hạn chế việc sử dụng này khi viết mã trình duyệt chéo:

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

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

IE6 BỎ QUA công cụ chọn đầu tiên trong quy tắc nhiều lớp, vì vậy IE6 thực sự áp dụng quy tắc .area1.larger như

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

Có nghĩa là nó sẽ ảnh hưởng đến TẤT CẢ các phần tử .larger.

Đó là một lỗi rất khó chịu và đáng tiếc (một trong nhiều lỗi) trong IE6 buộc bạn không bao giờ được sử dụng tính năng CSS đó nếu bạn muốn có một tệp CSS trên nhiều trình duyệt sạch.

Giải pháp sau đó là sử dụng tiền tố tên lớp CSS để tránh xung đột với các tên lớp chung chung:

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

.area2.area2Larger { ... }

Cũng có thể chỉ sử dụng một lớp, nhưng bằng cách đó, bạn có thể giữ CSS theo logic mà bạn dự định, đồng thời biết rằng .area1Larger chỉ ảnh hưởng đến .area1, v.v.

1

Ví dụ, lớp bạn áp dụng trên div có thể được sử dụng như một điểm tham chiếu đến các phần tử kiểu với 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 */

Để siêu ngữ nghĩa, bạn nên chuyển lớp vào bảng.

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

— George Wiscombe
nguồn

1

bạn cũng có thể có hai lớp trong một phần tử như thế này

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

mỗi mục trong lớp là lớp riêng của nó

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

— kR105
nguồn

1

kR105 đã viết:

bạn cũng có thể có hai lớp trong một phần tử như thế này

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

Tôi không thể thấy giá trị của điều này, vì theo nguyên tắc của các kiểu xếp tầng, kiểu cuối cùng được ưu tiên hơn. Ví dụ: nếu trong ví dụ trước đó của tôi, tôi đã thay đổi HTML để đọc

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

đường viền và văn bản của hộp sẽ có màu xanh lam, vì kiểu của .box2 chỉ định các giá trị này.

Cũng trong bài đăng trước đó của tôi, tôi nên nhấn mạnh rằng việc thêm các bộ chọn như tôi đã làm không giống như việc tạo một lớp con trong một lớp (giải pháp đầu tiên trong luồng này), mặc dù hiệu quả là tương tự.

— cực đại
nguồn