CSS 高级语法

Grouping ng selector

Maaari mong mag-group ng selector, kaya ang mga pinag-isang selector ay maaring bahagi ng magkakaparehong pahayag. Gumamit ng kumon sa paghihiwalay ng mga selector na dapat ma-group. Sa mga halimbawa na ito, nag-group kami ng lahat ng elementong title. Lahat ng mga elementong title ay lumaon.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Inherisyon at mga problema nito

Ayon sa CSS, ang mga anak na elementong ay magpapamatyag ng mga katangian mula sa magulang na elementong (hindi palaging gumagana sa ganitong paraan). Tingnan ang patakaran na ito:

body {
     font-family: Verdana, sans-serif;
     }

Ayon sa patakaran na ito, ang elementong body ng websayt ay gagamitin ang font na Verdana (kung mayroon itong font sa sistema ng bumabasa).

Sa pamamagitan ng CSS pagsunod sa kaparaanan, ang mga anak na elementong (tulad ng p, td, ul, ol, ul, li, dl, dt, at dd) ay magpapamatyag ng mga katangian ng pinakamataas na elementong (sa kasong ito ay body) na mayroon (ang mga anak na ito). Hindi kailangan ng iba pang mga patakaran, lahat ng mga anak ng body ay dapat magpakita ng font na Verdana, pati na rin ang mga anak ng mga anak ng elementong ito. At sa karamihan ng modernong browser, talagang ganito ang nangyayari.

Ngunit sa panahon ng malalim na digmaan sa browser, hindi sigurado na mangyayari ito, lalo na sa panahon na ang suporta sa kaparaanan ay hindi pangunahing pagpipilian ng mga negosyo. Halimbawa, ang Netscape 4 ay hindi sumusuporta sa pagsunod sa kaparaanan, hindi lamang ay pinagwawalang bahala ang pagsunod sa kaparaanan, kundi gayunding ang mga patakaran na naaayon sa elementong body. Hanggang sa IE/Windows hanggang sa IE6 mayroon ring mga problema na ito, ang mga estilo ng font sa loob ng table ay pwedeng maiwan. Ano pa natin gagawin?

Magiging magandang pagharap sa Netscape 4

Masuwerte na maari kang gamitin ang aming tinatawag na "Be Kind to Netscape 4" na alituntuning panlilinlang sa paghawak ng problema sa pagpapatupad ng lumang browser na hindi maunawaan ang pagpapatupad ng pagsunod sa kaparaanan.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {}}
     font-family: Verdana, sans-serif;
     }

4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。

继承是一个诅咒吗？

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }