Áp dụng CSS Style cho các phần tử con

232

Tôi muốn chỉ áp dụng các kiểu cho bảng bên trong DIV với một lớp cụ thể:

Lưu ý: Tôi muốn sử dụng bộ chọn css cho các phần tử con.

Tại sao số 1 hoạt động và số 2 không?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Tôi đang làm gì sai?

css css-selectors

— m
nguồn

Đừng quên rằng các bộ chọn>, + và [] không khả dụng cho IE6 trở xuống.

— Erick

309

Mã này " div.test th, td, caption {padding:40px 100px 40px 50px;}" áp dụng quy tắc cho tất cả các thphần tử được chứa bởi một divphần tử có một lớp có tên test, ngoài tất cả các td phần tử và tất cả các caption phần tử.

Nó không phải là giống như "tất cả td, thvà captioncác yếu tố đó được chứa bởi một divphần tử với một lớp test". Để thực hiện điều đó, bạn cần thay đổi bộ chọn:

' >' không được hỗ trợ đầy đủ bởi một số trình duyệt cũ hơn (Tôi đang nhìn vào bạn, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Ken Browning
nguồn

Có cách nào để viết div.test 3 lần không?

— roman m

2

@rm Không. Không có lồng nhau của các quy tắc hoặc nhóm 'với' loại

— sblundy

2

@romanm Có cách viết 'div.test' 3 lần! xem xét việc sử dụng sass hoặc ít khung hơn để ghi tập tin css! :)

— gillyb

@romanm - xem câu trả lời của tôi, sử dụng dấu * để nhắm mục tiêu tất cả trẻ em để tránh lặp lại hoặc sử dụng. class> * cho tất cả trẻ em trực tiếp. Nó không khó.

— Richard Edwards

Gợi ý về việc không được hỗ trợ trong IE rất hữu ích, tôi đã cố gắng làm cho một số CSS hoạt động cho DTCoreText trên iOS nhưng nó không hoạt động, trình phân tích cú pháp của họ còn tệ hơn IE.

— Còi báo

123

.test * {padding: 40px 100px 40px 50px;}

— Richard Edwards
nguồn

11

Lưu ý rằng, * ở đây có nghĩa là bạn không thể ghi đè nó bằng bất kỳ quy tắc cụ thể nào khác vì đây .test *sẽ là quy tắc cụ thể nhất cho mọi thành phần con. Nói cách khác, hãy nhớ rằng bất cứ điều gì bạn đặt vào bên trong .test *đều không thể bị ghi đè bởi bất kỳ quy tắc css cụ thể nào hơn vì đó test *là quy tắc cụ thể nhất.

— vadasambar

81

Bộ > chọn chỉ khớp với trẻ em trực tiếp, không phải con cháu.

Bạn muốn

div.test th, td, caption {}

hoặc nhiều khả năng

div.test th, div.test td, div.test caption {}

Biên tập:

Người đầu tiên nói

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Trong khi đó, người thứ hai nói

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

Trong ban đầu của bạn div.test > thnói any <th> which is a **direct** child of <div class="test">, mà có nghĩa là nó sẽ phù hợp <div class="test"><th>this</th></div>nhưng sẽ không phù hợp<div class="test"><table><th>this</th></table></div>

— Greg
nguồn

fwiw, bởi vì td và chú thích trong bộ chọn đó là "ngu ngốc" - chúng sẽ khớp với bất kỳ / chú thích cụ thể nào mà không liên quan đến div.test. Kiểu nhắm mục tiêu mù quáng đó hiếm khi là thứ bạn muốn trong CSS cho bất cứ thứ gì ngoại trừ những kiểu chung nhất.

— annakata

@annakata: đó là một phần của khung css, tôi đang cố gắng áp dụng nó cục bộ

— roman m

10

Nếu bạn muốn thêm kiểu trong tất cả trẻ em và không có đặc điểm kỹ thuật cho thẻ html thì hãy sử dụng nó.

Thẻ phụ huynh div.parent

thẻ con bên trong div.parent như <a>, <input>, <label>, vv

mã: div.parent * {color: #045123!important;}

Bạn cũng có thể loại bỏ quan trọng, không cần thiết

— người dùng1369111
nguồn

7

Đây là một số mã mà tôi đã viết gần đây. Tôi nghĩ rằng nó cung cấp một lời giải thích cơ bản về việc kết hợp tên lớp / ID với bút danh.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Mở rộng đoạn trích

— dấu
nguồn

CSS không cho phép nhận xét dòng đơn như //. Xem stackoverflow.com/questions/4656546/

— Mạnh

4

div.test td, div.test caption, div.test th

làm việc cho tôi

Bộ chọn con> không hoạt động trong IE6.

— Traingamer
nguồn

2

Theo như tôi biết điều này:

div[class=yourclass] table {  your style here; }

hoặc trong trường hợp của bạn ngay cả điều này:

div.yourclass table { your style here; }

(nhưng điều này sẽ làm việc cho các phần tử có yourclassthể không phải là divs) sẽ chỉ ảnh hưởng đến các bảng bên trong yourclass. Và, như Ken nói,> không được hỗ trợ ở mọi nơi (và div[class=yourclass]cũng vậy, vì vậy hãy sử dụng ký hiệu điểm cho các lớp).

— tunnuz
nguồn

0

Mã này cũng có thể thực hiện thủ thuật, sử dụng cú pháp SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
nguồn