Làm thế nào để tham khảo một tên lớp dài với không gian trong CSS?

Question

Tôi đang cố gắng tạo kiểu cho một số đầu ra Drupal. Đặc biệt, tôi đang cố gắng tham khảo một lớp học với một tên siêu dài (bao gồm cả không gian). Tôi không rõ cú pháp cho điều này. Tha thứ cho tôi, tôi là một newbie CSS. Xem:

<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document"> 
    <header> 
     <h2 property="dc:title" datatype=""><a href="/~actionin/node/38">National Nutrition Month: March 2012: “Get Your Plate in Shape”</a></h2> 

Cuối cùng tôi muốn tham chiếu thuộc tính H2. Tôi đã nghĩ rằng nó sẽ giống như sau:

.node SOMETHING-HERE .header h2 { declaration; } 

Tôi không thể chỉ tham chiếu nút vì nó được sử dụng ở nơi khác cho các mục đích khác. Tôi muốn trở thành cụ thể và chỉ chọn lớp này: (.) ​​

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

Answer 1

Sử dụng dấu chấm, bạn có thể kết hợp nhiều lớp như một nhóm

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix { 
... 
} 

Answer 2

Những không gian là một cách hiệu quả nhiều lớp trên một yếu tố, vì vậy Thẻ <article> của bạn có lớp "nút" và lớp "nút bài viết", v.v. v.v.

Vì vậy, nếu bạn có:

.node { background-color: black; } 
.node-article { color: white; } 

Sau đó, bài viết sẽ có một nền đen, và văn bản màu trắng. Cả hai sẽ được áp dụng.

Cũng nên nhớ bạn có thể tham khảo các thẻ, và id, vì vậy để có được H2 của bạn, bạn có thể làm:

article header h2 { .... } 

hoặc

#node-38 header h2 { .... } 

Và bạn không nhất thiết cần "tiêu đề" trong đó, tùy thuộc vào những gì bạn muốn đạt được.

Nếu bạn muốn chọn tất cả <h2> s đó là hậu duệ của <article> thẻ với "nút-article" lớp, sau đó bạn có thể làm điều này:

article.node-article h2 

Answer 3

Có lẽ tôi sẽ không đem lại cho bạn câu trả lời bạn cần, nhưng tên lớp không thể chứa dấu cách.

Một phần tử có thể có nhiều lớp, cho phép bạn kết hợp nhiều quy tắc tạo kiểu cho các lớp khác nhau để áp dụng cho một phần tử duy nhất.

Nếu bạn có dấu cách trong thuộc tính lớp, nó sẽ tạo thành phần tử có nhiều lớp, được phân tách bằng dấu cách.

Ví dụ, nếu bạn có một yếu tố như thế này

<div class="big red outlined"></div> 

và bạn có CSS ​​như thế này

.big { 
    width: 1000px; 
    height: 1000px; 
} 

.red { 
    color: red; 
} 

.outlined { 
    border: 1px solid black; 
} 

Cả ba phong cách sẽ được áp dụng cho các div duy nhất để làm cho nó lớn, đỏ và được vạch ra.

Trong trường hợp của bạn, có vẻ như bạn đang cố gắng truy cập vào một phần tử cụ thể, đó là mục đích của thuộc tính id là gì.Chú ý rằng các node có một id duy nhất:

<article id="node-38"> 

Bạn có thể truy cập vào một phần tử với id cụ thể trong CSS bằng cách sử dụng bộ chọn #, như thế này

#node-38 { 
    //style goes here 
} 

Trong trường hợp của bạn, có thể bạn muốn làm một cái gì đó như thế này:

#node-38 .header h2 { 
    //style goes here 
} 

Answer 4

Khi bạn xác định một phần tử với một lớp, bao gồm khoảng trắng thực sự biểu thị nhiều lớp.

Bài viết đó thực sự có các lớp sau được áp dụng cho nó: nút, nút bài viết, nút-teaser, ngữ cảnh-liên kết-khu vực, nút-ngay cả, xuất bản, với-ý kiến, nút-teaser, và clearfix.

Bạn có thể sử dụng bất kỳ lớp nào trong số các lớp đó khi nhắm mục tiêu phần tử. Nếu tôi đã tham chiếu đến thẻ H2, tôi sẽ làm điều gì đó như

article#node-38 header h2{ 

Đây là cách cụ thể hơn để nhắm mục tiêu hơn là sử dụng tất cả các lớp đó. đó là cú pháp ngắn hơn và cụ thể hơn cho phần tử bạn muốn tạo kiểu.

Answer 5

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

Dòng trên chứa tổng cộng 9 lớp vì khoảng trắng giữa chúng. vì vậy, node là một lớp duy nhất, node-article là một lớp khác, v.v. Nếu bạn muốn tham khảo một lớp thì bạn nên viết nó như

.node{background-color:red;} 

Nếu bạn muốn tham khảo nhiều lớp cùng một lúc và muốn áp dụng cùng một phong cách sau đó bạn có thể viết như

.node, node-article, node-teaser{background-color:red;} 

Trong trường hợp đó ba lớp riêng lẻ nodenode-articlenode-teaser sẽ có cùng kiểu với màu nền đỏ. Bây giờ, nếu bạn có nhiều phần tử với cùng một lớp tức là article thì tất cả bài viết có cùng một lớp sẽ có cùng một kiểu. Để áp dụng một phong cách cho một yếu tố duy nhất mà bạn có thể id thay vì class như id = "nút-38" và bạn có thể áp dụng phong cách với CSS để yếu tố này như

article#node-38{background-color:red;} 

để chọn/tham khảo các h2 trong tiêu đề với cha mẹ bài viết phần tử có id = "node-38" bạn có thể viết

article#node-38 header h2{background-color:red;}