Detalye ng Piling Pinagmulang ng Class ng CSS

Ang selector ng klase ay nagbibigay-daan na lagyan ng estilo nang hiwalay sa elemento ng dokumento.

Piling Pinagmulang ng CSS Class

Ang selector ng klase ay nagbibigay-daan na lagyan ng estilo nang hiwalay sa elemento ng dokumento.

Maaaring gamitin ang selector na ito nang hiwalay o magkasama sa ibang elemento.

Mga payo:Maaaring gamitin ang mga selector na ito lamang kapag na-markahan nang maayos ang dokumento, kaya kailangan ng pagpipilang at pagpaplano bago gamitin ang mga ito.

Ang pinakamadalas na paraan upang ilapat ang estilo hindi isinasaalang-alang ang partikular na elemento ng disenyo ay gamitin ang selector ng klase.

Baguhin ang HTML kodigo

Bago gamitin ang selector ng klase, dapat baguhin ang partikular na markasyon ng dokumento para sa normal na pagpapatakbo ng selector ng klase.

Upang i-associate ang estilo ng selector ng klase sa elemento, dapat na ilagay ang class sa isang magandang halaga. Tingnan ang HTML kodigo sa ibaba:

<h1 class="important">
Ang itaas na titulo ay napakahalaga.
</h1>
<p class="important">
Ang paragrapo na ito ay napakahalaga.
</p>

Sa ita na kodigo, ang class ng dalawang elemento ay na-taas sa important: ang unang titulo (elemento ng h1), ang ikalawang paragrapo (elemento ng p).

语法

然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:

*.important {color:red;}

如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:

.important {color:red;}

Subukan Nang Higit Pa

结合元素选择器

类选择器可以结合元素选择器来使用。

例如,您可能希望只有段落显示为红色文本:

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。

如果你确实希望为 h1 元素指定不同的样式,可以使用选择器 h1.important:

p.important {color:red;}
h1.important {color:blue;}

Subukan Nang Higit Pa

CSS 多类选择器

在上一节中,我们处理了 class 值中包含一个词的情况。在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

<p class="important warning">
Ang parangal na ito ay isang napakahalagang babala.
</p>

Ang pagkakabanggit ng dalawang salita ay hindi mahalaga, maaari ring isulat bilang warning important.

Assuming na lahat ng elemento na may klase na important ay malakas, at lahat ng elemento na may klase na warning ay may style na kalye, at lahat ng elemento na may parehong klase na important at warning ay may puting background, maaaring isulat:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Subukan Nang Higit Pa

Sa pamamagitan ng pagkakasama ng dalawang klase selector, maaaring pinili lamangNaglalaman ng mga pangalan ng klase na ito.ng mga elemento (walang kahulugan ang pagkakasunod ng pangalan ng klase).

Kung ang maraming piling pinagmulang klase ay may isang pangalan ng klase na wala sa listahan ng pangalan ng klase, ang pagkakatugma ay magiging nabigo. Tingnan ang sumusunod na patakaran:

.important.urgent {background:silver;}

Bilang inaasahan, ang piling pinagmulang ito ay magiging magkakatugma lamang sa p element na may class attribute na naglalaman ng mga salitang important at urgent. Kaya, kung ang class attribute ng p element ay may lamang mga salitang important at warning, hindi ito magiging magkakatugma. Gayunpaman, ito ay magiging magkakatugma sa mga sumusunod na element:

<p class="important urgent warning">
Ang paragrapong ito ay isang napakahalagang at napakahabol na babala.
</p>

Subukan Nang Higit Pa

Mahalagang Balita:Sa mga bersyon ng Internet Explorer bago ang IE7, ang iba't ibang platform na Internet Explorer ay hindi maaaring tamaang magtraktuhin ang maraming piling pinagmulang klase.