Chcę zastosować istniejący styl CSS do wszystkich etykiet na stronie. W jaki sposób?

Uwaga, to jest inne niż starsze pytanie How can I apply CSS on all buttons which are present in that page?, ponieważ jest to już istniejący styl. Tak więc biorąc pod uwagę, że styl, który będziemy nazywać „standard_label_style” istnieje już w dołączonym pliku CSS, co mogę zrobić, aby powiedzieć, że wszystkie etykiety na tej stronie powinien mieć ten styl krótkie dodania:Chcę zastosować istniejący styl CSS do wszystkich etykiet na stronie. W jaki sposób?

class="standard_label_style"

do każdego i każdego? I tak, wiem, że mógłbym zastosować style ex-post-facto z fragmentem kodu jQuery lub JavaScript. Próbuję tylko dowiedzieć się, jak mam to zrobić przy pomocy CSS.

Obserwuj Up

stałam kilka uwag, które mówią po prostu użyć składni jak ten .standard_label_style, etykiety ... Niestety, dokłada nic takiego, czego chcę. To pozwoliłoby mi zastosować dodatkowe reguły do klasy standard_label_style, a także reguły do etykiet na tej stronie, ale nie pozwoliłoby mi zastosować tego stylu do wszystkich etykiet na tej stronie. Aby zobaczyć przykład tego, oto arkusz stylów i html do wykazania. Etykieta bez klasy nadal nie będzie wyświetlana na czerwono, ale mam nadzieję, że tak się stanie. Chcę zastosować istniejącą klasę do wszystkich etykiet na stronie, a nie tylko do tej z klasą i bez dodawania nowego stylu na tej stronie, istniejący styl powinien być jedynym stylem.

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>

Źródło

2011-05-27 John Munsch

CSS tak naprawdę nie działa.

Można zastosować styl do wszystkich etykiet bezpośrednio:

label { 
    color: Lime; 
}

lub zastosować klasę do wszystkich etykiet

.labelClass { 
    color: Lime; 
} 

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

Można też mieć wiele selektorów, więc można ammend swój styl aktualny do być

.labelClass, label { 
    color: Lime; 
}

Czego nie można zrobić w standardowym CSS to coś takiego jak

label { 
    .labelClass; 
}

Dobrą wiadomością jest to, że istnieje kilka bibliotek po stronie serwera, które sprawiają, CSS ssać mniej i pozwala zrobić dokładnie tego typu rzeczy, patrz na przykład dotLess jeśli używasz .NET który zapewnia zagnieżdżone reguły i podstawowy model dziedziczenia.

Źródło

2011-05-27 14:56:19 fearofawhackplanet

W pliku css, nie można po prostu umieścić

.standard_label_style, label 
{ 
//styles 
}

Źródło

2011-05-27 14:51:11 AllisonC

Niestety nie, patrz przykład w poprawionym pytaniu. –

.standard_label_style, label { 
    /* stuff */ 
}

Źródło

2011-05-27 14:51:41

Nie. To pozwoliłoby mi na dokonanie przeglądu tego, co jest standardem_label_style, ale nie ma zastosowania do wszystkich etykiet. –

Nie. W rzeczywistości "mówi", że wszystkie elementy etykiety i/lub dowolny element z klasą standard_label_style zastosowane do niego, używa zdefiniowanych właściwości stylu. –

Dziękuję za poprawkę. Zgadnij co, to wciąż nie poprawiło twojej odpowiedzi ... –

Aby zastosować do każdej etykiety na stronie, użyj tego CSS:

label { 
/* styles... */ 
}

Jeśli masz istniejący styl (np. „Standard_label_style”) już w CSS, które można zastosować do każdej etykiecie:

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

To wpłynie na każdą etykietę na stronie, więc należy używać z rozwagą!

Źródło

2011-05-27 14:51:45 whostolemyhat

Ta składnia nie stosuje się do każdej etykiety, ta składnia pozwala mi wybrać zarówno standard_label_style ORAZ dowolne znaczniki etykiet w celu dodania lub zmiany stylów skojarzonych z obydwoma. Nie robi nic, aby cechy stylu standard_label_style odnosiły się do etykiet w kodzie HTML. –

Nie jestem pewien, można ... jedno możliwe obejście (czuje się nieco hackish chociaż) jest dołączenie styl do znacznika body, a następnie zmienić css się następująco:

body.standard_label_style label{ 
    //Your styles here 
}

Źródło

2011-05-27 14:53:15

Zgadzam się, że używanie selektorów CSS jest najlepszym rozwiązaniem. – Wex

Jeden z najbardziej niewykorzystanych sztuczek CSS wszechczasów: Podaj swoim ciałom id lub klasę!

HTML:

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

CSS:

#standard_label_style label{ 
    the styles 
}

odbędzie style, podczas

HTML:

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

nie będzie.

Źródło

2011-05-27 14:56:34

Masz tutaj do czynienia z priorytetem CSS. Deklaracje, które są "bardziej niejasne" (body tag, classes) są stosowane przed deklaracjami, które są "mniej niejasne" (specyficzne elementy, wbudowany styl CSS).

Tak więc twoja odpowiedź zależy od stylu , w jaki sposób styl definiuje style . Jeśli na przykład mówi label {...}, to jest to dość specyficzne i najlepiej jest użyć bardziej specyficzny styl CSS, zobacz:

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (dobry tutorial?)
CSS precedence

The poziom "specyficzności", który musisz przesłonić, jak już powiedziałem, zależy od tego, jak konkretny był twój drugi arkusz stylów. Zgodnie z linkiem "CSS osadzony w html zawsze przychodzi po zewnętrznych arkuszach stylów niezależnie od kolejności w html".

Istnieje również możliwość, że jeśli użytkownik zdefiniuje label {your custom css}, który powinien zadziałać, po zaimportowaniu arkusza stylów później. To jest to, co chciałbym najpierw sprawdzić, czy to działa. Czy próbowałeś tego? Jaki był rezultat?

Należy pamiętać, że aby całkowicie pominąć inny arkusz stylów, konieczne będzie zresetowanie dowolnego kodu CSS, którego nie używasz, ustawiając jego wartości na inherit lub odpowiednio.

Źródło

2011-05-27 15:00:29 ninjagecko

Chcę zastosować istniejący styl CSS do wszystkich etykiet na stronie. W jaki sposób?

Odpowiedz

Powiązane problemy