用户登录

优先级

想把样式用在网页文档上,需要先写选择器,选择文档上的指定的元素,再写需要的样式, 这样这些样式就会应用到指定的元素上。选择器的写法有很多种,不同的选择器写出来的样式的优先级是不一样的,也就是使用优先级更高的选择器写出来的样式,可以覆盖掉优先级比它更低的选择器写出来的样式。

Universal selector

* 号是 Universal selector,通用选择器,它选择的是页面上所有的元素,在样式表里写一段样式,用一下 * 号这个通用选择器,可以把元素的 box-sizing 统一设置成 border-box。在浏览器检查一下页面元素,现在无论我们选择哪个元素,都会应用使用通用选择器定义的样式,这些元素的 box-sizing 现在都是 border-box。

Firefox 浏览器的开发者工具,在样式选择器的旁边有个小图标,点击它以后可以高亮显示跟这个选择器匹配的所有的元素,你会发现点击这个通用选择器的这个小图标,页面上所有的元素都会高亮显示。

Type selector

Type selector,类型选择器,也可以叫元素选择器,也就是用 HTML 元素的名字作为选择器。这种选择器可以选中页面上的某个类型的元素。

比如这里我们用 body 这个元素作为选择器写一块样式,样式放在大括号里面,然后把 padding 设置成 0。再试一下用 p ,段落标签的名字作为选择器写一段样式,设置一下它的 margin,上下外边距设置成 16 像素,左右外边距设置成 0。再用 font-weight 设置成 lighter。

在浏览器,先选中 body 这个元素,元素上用了我们在样式表里用 body 这个元素的名字作为选择器的样式。再选中一个段落标签,元素上应用了使用 p 这个元素名作为选择器的样式,点击选择器旁边的小图标,会高亮显示匹配的元素,页面上用了 p 标签的地方会被高亮显示。

ID selector

ID selector,标识选择器,在 HTML 标签上,可以用 id 这个属性给标签设置一个标识,这个标识在文档里是唯一的。这个标识也可以作为样式的选择器。

页面上有个 div 元素的上面用 id 属性添加了一个标识,名字是 app。在样式表里,用这个标识作为选择器,先是一个 # 号,然后是标识的名字,比如 app。写一段样式,用 margin 添加 32 像素的外边距,再用 padding 把内边距设置成 32 像素。

在浏览器,选中 #app 这个标识的元素,元素上会应用使用了这个标识作为选择器的样式,点击选择器旁边的小图标,可以高度显示匹配这个选择器的元素。

Class selector

Class selector,类选择器,就是使用 HTML 标签上的 class 属性的值作为选择器,用这种选择器写的样式会用在所有使用了这个类的元素上。

在这个 h1 元素上,用 class 属性给它添加一个类,比如 font-serif,如果需要添加其它的类,中间可以用空间分隔开。

在样式表里,用 .font-serif 这个类的名字作为样式选择器,类选择器需要使用一个点作为前缀,后面是类的名字,.font-serif,写一段样式,里面用 font-family 设置一下字体组合,选择一种 serif 类型的字体组合。

现在页面上这个标题的字体会有变化,选中标题元素,在这个元素上应用了使用 .font-serif 这个类作为选择器的样式,因为这个元素上面添加了 .font-serif 这个类。点击这个类选择器旁边的小图标高亮显示匹配的元素。

回到项目,在内容作者的这个段落标签上面,也可以添加一下这个类,用 class 属性设置一下元素的类,添加一个 font-serif。

现在页面上的标题还有作者的字体都会有变化。高亮显示 .font-serif 选中的元素,你会发现标题还有作者都被高亮显示了。

HTML 元素上可以添加多个类,比如在这个作者段落标签上再添加一个类,名字是 font-bold,类和类之间用空间分隔开。在样式表里用 .font-bold 这个类作为选择器,添加一段样式,把 font-weight 设置成 bold。

在浏览器,选中这个内容作者元素,你会发现这个元素上同时应用了来自 .font-bold 作为选择器的样式,还有来自 .font-serif 这个类选择器的样式。

CSS 选择器(通用, 类型/元素/标签, 标识 ID, 类 Class)《 Web 基础:样式规则 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点