Muundo wa Kifupi wa Chaguo wa Class

Chaguo cha class cha kufikiria kinaweza kutumika kwa mtindo bila kuzingatia elementi ya kitabu cha kifaa.

Muundo wa Chaguo cha Class cha CSS

Chaguo cha class cha kufikiria kinaweza kutumika kwa mtindo bila kuzingatia elementi ya kitabu cha kifaa.

Chaguo hii cha kufikiria kinaweza kutumika kwa kina au kwenye kina ya elementi zingine.

Tahari:Hii inafaa kutumika kwa sababu inakusababisha chaguo hii cha kufikiria na uwanja wa kuzingatia kufikiria na nafasi kwa kufikiria.

Wasiwi wengi wa mtindo hufikiria kwa ajili ya kuanzisha mtindo bila kufikiria kifaa cha kila elementi, tabia ya kawaida ni kuitumia chaguo cha class.

Kumwambia kadi ya HTML

Kwenye mawazo ya class cha chaguo hii, inafaa kumwambia mawazo ya kifaa cha utabibu ili chaguo cha class kufunguliwa kwa urahisi.

Kufanya kuwasiliana mtindo wa chaguo wa class na elementi, lazima class inasababishwe kuwa thamani kidogo. Angalia kadi ya HTML inayofuata:

<h1 class="important">
Kichwa hiki ni muhimu sana.
</h1>
<p class="important">
Mawaka huu ni muhimu sana.
</p>

Kwenye kadi hii, class ya mifano mbili inasababishwa kufikirika kama muhimu: kichwa kikuu kwa kwanza (elementi h1), mawaka wa pili (elementi p).

语法

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

*.important {color:red;}

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

.important {color:red;}

Jifunze Kwa Kupewa Mafanikio

结合元素选择器

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

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

p.important {color:red;}

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

Kama inafaa kumekanisha h1 inayotaka kumekanisha mabaki ya kina, inafaa kutumia mtindo wa kichwa h1.important:

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

Jifunze Kwa Kupewa Mafanikio

CSS Multi-class Selector

Kwenye mada ya kafara, tumepokea class ya kina inayotaka kumekanisha neno moja. Kwenye HTML, class ya kina inaweza kumekanisha orodha ya maadili, yenye kina kina kwa sababu ya kipindi kina. Mfano, kama inafaa kumekanisha kina inayotaka kumekanisha tabia ya muhimu na tabia ya kina, inafaa kuandika:

<p class="important warning">
This paragraph is a very important warning.
</p>

Kawaida ya matukio haitakuwa na urahisi, inafaa kuandika kama warning important.

Tunapendeleza kwamba tabia zote za class ya important ni mabadi, na tabia zote za class ya warning ni kilele, tabia zote za class ambazo zina maandiko ya important na warning zina mabaki ya mawili ya kiume. Inafaa kuandika:

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

Jifunze Kwa Kupewa Mafanikio

Kwa kuunganisha mtindo wa kichwa kumi pili, inafaa kubadilika同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.important.urgent {background:silver;}

Kama ilivyo, chaguo hiki kinaingia kwa p elementi ambayo ina class ya kina inayohusiana na mawazuri ya important na urgent. Kama p elementi ina class ya kina yenye mawazuri ya important na warning pekee, hayakupata kuingia. Hata hivyo, itakuwa na wengi wa kina:

<p class="important urgent warning">
Makala hii ina uharibifu mkubwa na inayohusiana na uharibifu wa kawaida.
</p>

Jifunze Kwa Kupewa Mafanikio

Mafanikio ya Kuhusu:Kwenye IE7 na msingi yake, kwa kila msingi wa Internet Explorer kwenye mawingu tofauti hayakupata kusaidia chaguo cha kifupi cha kikundi cha kifungu.