强烈推荐:非常不错的样式表CSS教程(2)

作者:袖梨 2022-07-02

元素的属性(Attribute)也可以用于selector。下面的列表中例举了几种模式:
Attribute Selector Patterns
模式
说明
E[attr]
Attribute selector属性选择器、匹配任何含有该属性的E元素,不必考虑它的值的大小
E[attr="value"]
Attribute selector,属性选择器、匹配任何具有该属性的元素E,条件是属性的值必须与设定的值相等。
E[attr~="value"]
Attribute selector属性选择器、有些元素属性当中可能包含若干个值(通过空格分隔开)。这种模式匹配任何具备属性attr,同时包含特定值(值可能是列表形式)的元素E
E.value
Class selector, “类”选择器、仅对HTML有效。匹配任何设置了CLASS类属性的元素E,与 E[ class ~ = " value "]等效.
E#value
ID selectorID选择器、相配任何设置了ID属性的元素E.对于HTML等价于
E [ id = " value "]
上面这些selector设置模式可以灵活地使用到标记的样式规则当中,例如:*.highlight { background-color: #ffff00 }*#mainTitle { font-size: 150%; font-weight: bold; }
*.highlight匹配设置 class ="highlight" 的“任何”元素。第二个规则匹配了 id ="mainTitle"的任何元素。多数情况下星号“*”可以被省略,就象下面这样。.highlight { background-color: #ffff00 }#mainTitle { font-size: 150%; font-weight: bold; }
类"CLASS"和"ID"哪种方式更加实用好用呢?通过上面的两个例子,我们来探讨一个非常有趣的问题:“CLASS VS ID” 类和ID的对决
●Class vs ID
HTML标记的ID属性为标记设定了唯一的标识符,而类属性是允许用户为HTML元素设置样式的一种方式。
严格来讲、在同一个文档(网页)内,没有两个元素具有相同的ID。无论何时,只要为标记设置ID,就必须保证ID的值不能和其它元素的ID冲突,哪怕他们拥有不同的标记名称也不行。所以,如果用ID设置样式,每一个ID只能应用于页面当中的一个元素。(一对一关系)
为什么不使用内联样式(inline style)代替ID selector呢?在实际应用当中,你会发现:将所有样式定义在一起要比那些遍布于文档当中的内联样式要方便的多。如果是外联样式表,它还可以被其它文档共享使用。
类(class)选择器可以匹配页面当中的若干元素(一对多关系),即使元素使用不同的标记名称也可以。同一标记可以使用若干个“类”(class)来定义样式(指定一列使用空格分隔的类class的名称)。例如:h3.warning { color: red }.highlight { background-color: yellow }...

Danger

Proceed with Caution

第 1 2 页

相关文章

精彩推荐