CSS 选择器 1 .常用选择器 常用的选择器有类型选择器和后代选择器。 1 .1 类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1)ID 选择器,根据元素 ID 来选择元素。 前面以”#”号来标志,在样式里面可以这样定义: #demoDiv{ color:#FF0000; } 这里代表 id 为 demoDiv 的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID 定义为 demoDiv,如:
这个区域字体颜色为红色
用浏览器浏览,我们可以看到因为区域内的颜色变成了红色 再定义一个区域
这个区域没有定义颜色
用浏览器浏览,与预期的一样,区域没有应用样式,所以区域中的字体颜色还是默认的颜色黑色。 2)类选择器 根据类名来选择 前面以”.”来标志,如: .demoDiv{ color:#FF0000; } 在 HTML 中,元素可以定义一个 class 的属性。 如:
这个区域字体颜色为红色
同时,我们可以再定义一个元素:
这个段落字体颜色为红色
最后,用浏览器浏览,我们可以发现所有class 为demo 的元素都应用了这个样式。包 括了页面中的div 元素和p 元素。 上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那个一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。 我们可以改成这样来定义。
这个区域字体颜色为红色
同时,我们可以再定义一个元素:
这个段落字体颜色为红色
这样,我们就只是定义了一个类,同时把样式应用到了所有的元素当中。 3)标签选择器 根据标签选择 用标签选择指根据标签名来应用样式,定义时,直接用标签名。如: div{ color:#FF0000; } 我们再定义一个元素。
这个区域字体颜色为红色
这个区域字体颜色也为红色
用浏览器浏览,我们发现两个DIV 元素都被应用了样式,这里不用定义id,也无需要定义class 属性。 示例参见:根据标签来选择元素.html 这种选择方式非常的有用,比如你觉得锚链接的下划线不太美观,想把所有的锚链接的样式都设成无下划线形式,颜色为鲜艳的蓝色。可以这样定义。 a{ text-decoration:none; color:#00CCCC; } 1 .2 后代选择器 后代选择器也称为包含选择器,用来选择特定元素或元素组的后代...