Muundo wa Chaguo wa Tovuti wa CSS
- Mwongozo wa Kwanza Image Sprite wa Tovuti wa CSS
- Pya Muundo wa Tovuti wa Form
为带有特定属性的 HTML 元素设置样式
我们可以设置带有特定属性或属性值的 HTML 元素的样式。
Mchaguli wa CSS [attribute]
[attribute] 选择器用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素；
Mifano
a[target] {
background-color: yellow;
}
CSS [attribute="value"] 选择器
[attribute="value"] 选择器用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 <a> 元素：
Mifano
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素：
Mifano
[title~="flower"] {
border: 5px solid yellow;
}
上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。
CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
Mifano hapa inapata kila kiwango kina class iliyotaka kuanza na "top":
注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。
Mifano
[class|="top"] {
background: yellow;
}
Misharti ya CSS [attribute^="value"]
[attribute^="value"] misharti inatumiwa kwa kuanza kwa thamani inayotaka kwa kila kiwango kina thamani iliyotaka kuanza.
Mifano hapa inapata kila kiwango kina class iliyotaka kuanza na "top":
Mafanikio:Wakati wa uadilifu, thamani haipweza kuwa herufi kamili!
Mifano
[class^="top"] {
background: yellow;
}
Misharti ya CSS [attribute$="value"]
[attribute$="value"] misharti inatumiwa kwa kuanza kwa thamani inayotaka kwa kila kiwango kina thamani iliyotaka kuishia.
Mifano hapa inapata kila kiwango kina class iliyotaka kuishia na "test":
Mafanikio:Wakati wa uadilifu, thamani haipweza kuwa herufi kamili!
Mifano
[class$="test"] {
background: yellow;
}
Misharti ya CSS [attribute*="value"]
[attribute*="value"] misharti inapata kila kiwango kina thamani iliyotaka kuna herufi inayotaka.
Mifano hapa inapata kila kiwango kina class iliyotaka "te":
Mafanikio:Wakati wa uadilifu, thamani haipweza kuwa herufi kamili!
Mifano
[class*="te"] {
background: yellow;
}
Muundo wa formu
Kwa sababu ya kufungua muundo wa formu ingawa hau na class au id, misharti ya kifupi ni muhimu:
Mifano
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Mafanikio:Tazama nchini Mafunzo ya formu ya CSSKwa habari zaidi juu ya kuongeza muundo wa formu kwa CSS, tafadhali tazama mafunzo ya formu ya CSS.
Misharti ya kila CSS
| Misharti | Mifano | Maelezo ya mifano |
|---|---|---|
| [attribute] | [target] | Chagia kipimo kipya kwa target kwa kila kiwango. |
| [attribute=value] | [target=_blank] | Chagia kipimo kipya kwa target kwa "_blank" kwa kila kiwango. |
| [attribute~=value] | [title~=flower] | Chagia kipimo kipya kwa herufi inayoshika "flower" kwa kila kiwango. |
| [attribute|=value] | [lang|=en] | Chagia kipimo kipya kwa herufi kuanza na "en" kwa kila kiwango. |
| [attribute^=value] | a[href^="https"] | Chagia kipimo kipya kwa href kuanza na herufi "https" kwa kila <a>. |
| [attribute$=value] | a[href$=".pdf"] | Chagia kipimo kipya kwa href kwa mifano ya <a> yenye kifupi cha ".pdf". |
| [attribute*=value] | a[href*="codew3c"] | Kuchagula kila <a> kina wadhihiko wa 'href' ambao ina 'codew3c'. |
Kusomoa
Kitabu cha Kichwa:Mifano ya Mchaguli wa CSS wa Mwili
- Mwongozo wa Kwanza Image Sprite wa Tovuti wa CSS
- Pya Muundo wa Tovuti wa Form
