Anh chị em có điều kiện CSS khó khăn> bộ chọn con> Có thể thực hiện điều này không?

Question

Trong đánh dấu bên dưới, tôi đang tìm kiếm một cách (có thể sử dụng bộ chọn css) để tạo kiểu div nội dung khác nhau tùy thuộc vào sự hiện diện của menu? Menu có thể có hoặc không có mặt ở vị trí đó trong đánh dấu và nếu nó ở đó, tôi cần thêm một số lợi nhuận hàng đầu vào nội dung.

Tôi tin rằng anh chị em ruột và chọn hậu duệ quy tắc có thể không đi xa ...

"Khi menu hiện diện như một đứa trẻ của tiêu đề thiết lập các lề trên nội dung (có mẹ là một anh chị em ruột của tiêu đề) đến 100 pixel. Nếu không, thiết lập nó để không"

<div class="header"> 
    <div class="sitetitle">site title</div> 
    <div class="tagline">tagline</div> 
    <div class="menu">menu</div> 
</div> 

<div class="main"> 
    <div class="content">content goes here</div> 
</div> 

Nếu css cho phép nhóm, tôi sẽ làm điều đó theo cách này ...

(.header ~ .menu) + (.main > .content) {margin-top:100px;} 

Answer 1

Không thể trong đánh dấu của bạn.

Bộ chọn CSS chỉ có thể xem tổ tiên và ở các trục anh chị em. Bạn không thể nhìn vào bên trong ("những gì con tôi có") - chỉ trở lên ("bố mẹ tôi") và đi ngang ("điều gì bên cạnh tôi").

Ví dụ. Đây:

div.header div.menu 

đề cập đến bất kỳ <div class="menu"> một trong những người có tổ tiên là một <div class="header">.

này:

div.header > div.menu 

đề cập đến bất kỳ <div class="menu"> mà trực tiếp tổ tiên (tức là "mẹ") là một <div class="header">.

này:

div.header ~ div.menu 

đề cập đến bất kỳ <div class="menu"> mà có một <div class="header"> giữa các anh chị em trước của nó, tức là họ có cùng phụ huynh và xảy ra cái khác, nhưng không nhất thiết phải liền kề với nhau (đó là "nhìn ngang ").

này:

div.header + div.menu 

đề cập đến bất kỳ <div class="menu"> mà trực tiếp trước anh chị em là một <div class="header">.

Không có bộ chọn đi ngang nào khác trong CSS (câu lệnh này đề cập đến CSS2) và chắc chắn không có điều kiện nào.

Answer 2

Bạn có thể sử dụng một số javascript để phát hiện điều đó. Kiểm tra xem trình đơn là dưới tiêu đề ở tải, và nếu có, sau đó đặt margin-top nội dung để 100px

Answer 3

Bạn có thể sử dụng jQuery:

​$('.header:has(.menu) + .main > .content')​.css('margin-top', '100px');​​​​​​​​​​​ 

Thật không may là selector :has() không tìm thấy theo cách của mình vào css3.

Nhưng tại sao bạn không chỉ cần áp dụng margin-bottom đến div.menu?

Answer 4

Tôi đã sử dụng mã CSS này ở định dạng có điều kiện. Chỉ mục định dạng bằng cách đếm từ cuối.

#stk-service-account-menu ul li:nth-last-child(1):before {