2011-05-27 22 views
7

Lưu ý, điều này khác với câu hỏi cũ hơn How can I apply CSS on all buttons which are present in that page? vì đây là kiểu đã tồn tại. Vì vậy, cho rằng một phong cách, mà chúng ta sẽ gọi là "standard_label_style" đã tồn tại trong một tập tin CSS bao gồm, những gì tôi có thể làm gì để nói rằng tất cả các nhãn trên trang này nên có mà phong cách ngắn thêm:Tôi muốn áp dụng kiểu CSS hiện có cho tất cả các nhãn trên một trang. Làm sao?

class="standard_label_style" 

cho mỗi và mọi người? Và vâng, tôi biết tôi có thể áp dụng các kiểu cũ sau khi thực tế với một đoạn mã jQuery hoặc JavaScript. Tôi chỉ cố gắng tìm hiểu làm thế nào tôi phải làm điều đó với CSS.

Follow Up

tôi đã nhận được nhiều ý kiến ​​mà nói chỉ cần sử dụng cú pháp như .standard_label_style này, nhãn ... Đáng tiếc rằng không có gì giống như những gì tôi muốn. Điều đó sẽ cho phép tôi áp dụng các quy tắc bổ sung cho lớp standard_label_style, cũng như quy tắc cho các nhãn trong trang này, nhưng sẽ không cho phép tôi áp dụng kiểu đó cho tất cả các nhãn trên trang này. Để xem ví dụ về điều này, đây là biểu định kiểu và html để minh họa. Nhãn mà không có một lớp sẽ vẫn không xuất hiện màu đỏ nhưng đó là những gì tôi hy vọng sẽ xảy ra. Tôi muốn áp dụng một lớp hiện có cho tất cả các nhãn đó trên trang, không chỉ lớp có nhãn và không thêm kiểu mới trên trang này, kiểu hiện có phải là kiểu duy nhất.

included.css:

.standard_label_style { color: red; } 

test.html:

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="included.css"> 
    <style> 
     .standard_label_style, label { } 
    </style> 
    </head> 
    <body> 
    <label class="standard_label_style">Test Label</label><br/> 
    <label>Unclassed Test Label</label> 
    </body> 
</html> 

Trả lời

11

CSS không thực sự làm việc như thế.

Bạn có thể áp dụng một phong cách cho tất cả các nhãn trực tiếp:

label { 
    color: Lime; 
} 

hoặc áp dụng một lớp học để tất cả các nhãn

.labelClass { 
    color: Lime; 
} 

<label class="labelClass"></label> 

Bạn cũng có thể có nhiều bộ chọn, vì vậy bạn có thể ammend phong cách hiện tại của bạn để được

.labelClass, label { 
    color: Lime; 
} 

Những gì bạn không thể làm trong CSS giữa các ý kiến ​​cái gì đó như

label { 
    .labelClass; 
} 

Tin tốt là có một loạt các thư viện phía máy chủ mà làm cho CSS hút ít hơn và cho phép bạn thực hiện chính xác loại điều, xem ví dụ dotLess nếu bạn đang sử dụng .NET cung cấp quy tắc lồng nhau và mô hình kế thừa cơ bản.

4

Trong file css của bạn, có thể bạn không chỉ cần đặt

.standard_label_style, label 
{ 
//styles 
} 
+0

Thật không may là không, xem ví dụ trong câu hỏi đã sửa đổi. –

3
.standard_label_style, label { 
    /* stuff */ 
} 
+0

Không. Điều đó sẽ cho phép tôi sửa đổi những gì standard_label_style là, nhưng nó không làm cho nó áp dụng cho tất cả các nhãn. –

+0

Không. Trên thực tế nó "nói" rằng tất cả các phần tử nhãn và/hoặc bất kỳ phần tử nào với lớp standard_label_style được áp dụng cho nó, sử dụng các thuộc tính kiểu đã xác định. –

+0

Cảm ơn bạn đã chỉnh sửa. Đoán xem, nó vẫn không làm cho câu trả lời của bạn đúng ... –

8

Để áp dụng cho mỗi nhãn trên trang, sử dụng CSS này:

label { 
/* styles... */ 
} 

Nếu bạn có kiểu hiện có (ví dụ: "standard_label_style") trong CSS đã có, bạn có thể áp dụng điều đó cho mọi nhãn:

.standard_label_style, label { 
/* styles... */ 
} 

Điều này sẽ ảnh hưởng đến mọi nhãn thông qua trang web, vì vậy hãy thận trọng!

+0

Cú pháp đó không áp dụng cho mọi nhãn, cú pháp đó cho phép tôi chọn cả hai standard_label_style VÀ bất kỳ thẻ nhãn nào để thêm hoặc thay đổi kiểu được liên kết với cả hai. Nó không làm bất cứ điều gì để làm cho các đặc tính phong cách của standard_label_style áp dụng cho các nhãn trong HTML. –

3

Tôi không chắc chắn bạn có thể ... một workaround có thể (cảm thấy một chút hackish dù) là để đính kèm phong cách vào thẻ cơ thể của bạn, sau đó thay đổi css được điều này:

body.standard_label_style label{ 
    //Your styles here 
} 
+0

Tôi đồng ý rằng việc sử dụng bộ chọn CSS là đặt cược tốt nhất của bạn. – Wex

2

Một trong những thủ thuật CSS được sử dụng nhiều nhất mọi thời đại: Cung cấp cho cơ thể của bạn một id hoặc lớp học!

HTML:

<body id="standard_label_style"> 
    <label>Hey!</label> 
</body> 

CSS:

#standard_label_style label{ 
    the styles 
} 

sẽ lấy phong cách, trong khi

HTML:

<body id="custom_label_style"> 
    <label>Custom!</label> 
</body> 

Sẽ không.

0

Bạn đang xử lý ở đây với ưu tiên CSS. Các khai báo "mơ hồ hơn" (thẻ body, các lớp) được áp dụng trước các khai báo "ít mơ hồ" (các phần tử cụ thể, CSS nội tuyến).

Vì vậy, câu trả lời của bạn tùy thuộc vào cách biểu định kiểu đang xác định kiểu dáng label. Nếu ví dụ nó nói label {...}, thì đó là khá cụ thể, và đặt cược tốt nhất của bạn là sử dụng một phong cách CSS cụ thể hơn, xem:

Các mức độ "đặc hiệu" bạn cần ghi đè, như tôi đã nói, tùy thuộc vào mức độ cụ thể của biểu định kiểu khác của bạn. Theo liên kết, "CSS được nhúng trong html luôn xuất hiện sau các bảng định kiểu bên ngoài bất kể thứ tự trong html".

Cũng có một cơ hội nếu bạn tự xác định label {your custom css} sẽ hoạt động, nếu bạn nhập biểu định kiểu của mình sau đó. Đó là những gì tôi sẽ cố gắng đầu tiên để xem nếu nó hoạt động. Bạn đã thử cái này chưa? Thế kết quả là gì?

Lưu ý rằng nếu bạn muốn ghi đè hoàn toàn bảng định kiểu khác, bạn cũng cần phải đặt lại bất kỳ CSS nào bạn không sử dụng bằng cách đặt giá trị của nó thành inherit hoặc khi thích hợp.

Các vấn đề liên quan