浅谈网站制作中的Css属性

        1、简易属性选择器
        只顾其名不顾其值,这是简易属性选择器的特点。
        ｈ１［ｃｌａｓｓ］　｛ｃｏｌｏｒ：　ｓｉｌｖｅｒ；｝将会作用于任何带ｃｌａｓｓ的ｈ１元素,不管class的值是什么。所以＜ｈ１　ｃｌａｓｓ＝＂ｈｏｏｐｌａ＂＞Ｈｅｌｌｏ＜／ｈ１＞、＜ｈ１　ｃｌａｓｓ＝＂ｓｅｖｅｒｅ＂＞Ｓｅｒｅｎｉｔｙ＜／ｈ１＞、＜ｈ１　ｃｌａｓｓ＝＂ｆａｎｃｙ＂＞Ｆｏｏｌｉｎｇ＜／ｈ１＞的ｈ１都会受到这条规则的影响。
        当然,这个“属性”不仅仅是ｃｌａｓｓ或者ｉｄ,可以是该元素所有合法属性,比如ｉｍｇ的ａｌｔ,这样ｉｍｇ［ａｌｔ］｛ｃｓｓ　ｄｅｃｌａｒａｔｉｏｎｓ　ｈｅｒｅ；｝将会作用于任何带有ａｌｔ属性的ｉｍｇ元素。那么ａ［ｈｒｅｆ］［ｔｉｔｌｅ］　｛ｆｏｎｔ－ｗｅｉｇｈｔ：　ｂｏｌｄ；｝呢?聪明的你一定已经知道,这会作用于同时带ｈｒｅｆ和ｔｉｔｌｅ属性的ａ元素,比如＜ａ　ｈｒｅｆ＝＂ｈｔｔｐ：／／ｗｗｗ．５９３２６０３．ｃｎ／＂　ｔｉｔｌｅ＝＂ｊｚｘｕｅ　Ｈｏｍｅ＂＞ｊｚｘｕｅ．Ｃｏｍ＜／ａ＞。
        2、精确属性值选择器
        ｉｄ和类本质上就是精确属性值选择器,没错,ｈ１＃ｌｏｇｏ等于ｈ１［ｉｄ＝＂ｌｏｇｏ＂］。如前所述,我们不要局限于ｉｄ或者ｃｌａｓｓ,我们可以使用任何属性!例如ａ［ｈｒｅｆ＝＂ｈｔｔｐ：／／ｗｗｗ．５９３２６０３．ｃｎ
／＂］［ｔｉｔｌｅ＝＂Ｗ３Ｃ　Ｈｏｍｅ＂］　｛ｆｏｎｔ－ｓｉｚｅ：　２００％；｝将会作用于ａ［ｈｒｅｆ＝＂ｈｔｔｐ：／／ｗｗｗ．５９３２６０３．ｃｎ／＂］［ｔｉｔｌｅ＝＂Ｗ３Ｃ　Ｈｏｍｅ＂］　｛ｆｏｎｔ－ｓｉｚｅ：　２００％；｝将会作用于＜ａ　ｈｒｅｆ＝＂ｈｔｔｐ：／／ｗｗｗ．５９３２６０３．ｃｎ／＂　ｔｉｔｌｅ＝＂ｊｚｘｕｅ　Ｈｏｍｅ＂＞ｊｚｘｕｅ．Ｃｏｍ＜／ａ＞。
        3、部分属性值选择器
        如其名,只要属性值部分匹配(这里的部分,实际上要匹配整个单词)就会作用于该元素。让我们来看个例子:
        ＜ｐ　ｃｌａｓｓ＝＂ｕｒｇｅｎｔ　ｗａｒｎｉｎｇ＂＞Ｗｈｅｎ　ｈａｎｄｌｉｎｇ　ｐｌｕｔｏｎｉｕｍ，　ｃａｒｅ　ｍｕｓｔ　ｂｅ　ｔａｋｅｎ　ｔｏ　ａｖｏｉｄ　ｔｈｅ　ｆｏｒｍａｔｉｏｎ　ｏｆ　ａ　ｃｒｉｔｉｃａｌ　ｍａｓｓ．＜／ｐ＞ｐ［ｃｌａｓｓ～＝＂ｗａｒｎｉｎｇ＂］　｛ｆｏｎｔ－ｗｅｉｇｈｔ：　ｂｏｌｄ；｝　和ｐ［ｃｌａｓｓ～＝＂ｕｒｇｅｎｔ＂］　｛ｆｏｎｔ－ｗｅｉｇｈｔ：　ｂｏｌｄ；｝中任何一条都可以让这个ｐ的字体变粗。
        该选择器十分有用,比如你要样式化插图,其ｔｉｔｌｅ中都含字符串”Ｆｉｇｕｒｅ,如ｉｍｇ［ｔｉｔｌｅ～＝＂Ｆｉｇｕｒｅ＂］　不会匹配ｔｉｔｌｅ＝　＂Ｆｉｇｕｒｅ５：ｘｘｘ说明＂ 。
        需要注意的是,如我第一句就强调的,你需要匹配的是整个单词,ｉｍｇ［ｔｉｔｌｅ～＝＂Ｆｉｇｕｒｅ＂］　不会匹配ｔｉｔｌｅ＝　＂Ｆｉｇｕｒｅ５：ｘｘｘ说明＂"。
        另外,我做了个小小的测试,你把例子中的“Ｆｉｇｕｒｅ”改成“插图”,把ｉｍｇ［ｔｉｔｌｅ～＝＂Ｆｉｇｕｒｅ＂］改成ｉｍｇ［ｔｉｔｌｅ～＝＂插图＂］,在Ｆｉｒｅｆｏｘ中依然可以匹配,不管编码（ｅｎｃｏｄｉｎｇ）是ＧＢ２３１２还是ＵＴＦ－８。看来ＣＳＳ对中文的支持还不赖。
        4、特殊属性选择器
        有点怪,这个选择器。它是这样工作的,嗯,举个例子比描述更容易。
        ＊［ｌａｎｇ｜＝＂ｅｎ＂］　｛ｃｏｌｏｒ：　ｗｈｉｔｅ；｝,这条规则（ｒｕｌｅ）将会选择属性ｌａｎｇ的值ｅｎ或者ｅｎ-打头的元素。就是说,它可以匹配＜ｈ１　ｌａｎｇ＝＂ｅｎ＂＞Ｈｅｌｌｏ！＜／ｈ１＞、＜ｐ　ｌａｎｇ＝＂ｅｎ－ｕｓ＂＞Ｇｒｅｅｔｉｎｇｓ！＜／ｐ＞和＜ｄｉｖ　ｌａｎｇ＝＂ｅｎ－ａｕ＂＞Ｇ＇ｄａｙ！＜／ｄｉｖ＞而不匹配＜ｐ　ｌａｎｇ＝＂ｆｒ＂＞Ｂｏｎｊｏｕｒ！＜／ｐ＞和＜ｈ３　ｌａｎｇ＝＂ｃｙ－ｅｎ＂＞Ｊｒｏｏａｎａ！＜／ｈ３＞。