CSS选择器
2021-05-16 07:28
标签:ack 重要 选中 方式 列表项 gen 不同 红色 red CSS选择器的准确书写,保证了元素应用样式的正确性,CSS中选择器主要包括: 1、元素选择器: 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。元素选择器又称为类型选择器(type selector)。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身: 2、类选择器: 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。 如有这样一段HTML代码: 如果只想选择所有类名相同的元素,可以在类选择器中忽略元素选择器: 只想选中p时,类选择器可以结合元素选择器来使用,选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。: 通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。 这段代码在以下元素中不能显示: 但是在下面的元素中就能实现: 3、id选择器 在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。 类选择器可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。 与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。 不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。 类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。 4、 CSS选择器 标签:ack 重要 选中 方式 列表项 gen 不同 红色 red 原文地址:http://www.cnblogs.com/zzmiaow/p/7748644.htmlhtml {color:black;}
h1 {color:blue;}
p {color:silver;}
h1 class="important">
This heading is very important.
h1>
p class="important">
This paragraph is very important.
p>
.important {color:red;}
或者
*.important {color:red;}
p.important {color:red;}
.important.urgent {background:silver;}
p class="important warning">
This paragraph is a very important warning.
p>
p class="important urgent warning">
This paragraph is a very important and urgent warning.
p>
上一篇:webpack的使用二
下一篇:webpack使用七