html中类选择器的作用,CSS选择器在设计中的作用

您的位置：首页 - 教程 - CSS - 正文

CSS选择器在设计中的作用

对于我们前端人员来说，必须要注重的就是页面的美观，一个页面的好看与否就肯定要看你css的样式写的水平怎么样，而要全面利用css写好网页当然也要熟悉css选择器的使用，只有熟练掌握了css选择器，才不至于在书写css代码的时候掉进坑里。

最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a，甚至可以是html本身。在W3C标准中，元素选择器又称为类型选择器(type selector),类型选择器匹配文档语言元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例。

类选择器允许以一种独立于文档元素的方式来制定样式，该选择器可以单独使用，也可以与其它元素结合使用。需要提到的是，只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。如果你要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

下面说说对于我这个初学者最喜欢用的ID选择器，ID选择器允许以一种独立于文档元素的方式来制定样式。在某些方面，ID选择器类似于类选择器，不过也有一些重要差别，首先，ID选择器前面有一个“#”号，也称为棋盘号或井号，在一个HTML文档中，ID选择器会使用一次，而且仅一次。第二个区别是ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值。需要注意，类选择器和ID选择器可能是区分大小写的，这取决于文档的语言，HTML和XHTML将类和ID值定义为区分大小写，所以类和ID值的大小写必须与文档中的相应值匹配。

属性选择器可以根据元素的属性及属性值来选择元素，如果希望选择器有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例如*[title] ; a[href];。属性选择器在XML文档中相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。请注意，这种格式要求必须与属性值完全匹配，如果熟悉新内阁制包含用空格分隔的值列表，匹配就可能出现问题。

后代选择器又称包含选择器，它可以选择作为某元素后代的元素。我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。有关后代选择器有一个容易被忽视的方面，即两个元素之间的层次间隔可以是无限的，例如，如果写作 ul li，这个语法就会选择从ul元素继承的所有li元素，而不论li的嵌套层次多深。

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请选择子元素选择器，它的格式如 div>p,中间用“>”间隔。

相邻兄弟选择器可选择紧接在另一元素后的元素，且两者有相同父元素。相邻兄弟选择器使用率加号(+)，即相邻兄弟结合符，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器( Adjacent sibing selector)。

在了解每个选择器正确的使用方法后，再了解各类选择器在HTML中的权重对于我们编写样式是非常有必要的，下面就是选择器权重的一些例子：

1* {} /* a=0 b=0 c=0 d=0 ->优先级= 0,0,0,0 */

2li {} /* a=0 b=0 c=0 d=1 ->优先级 = 0,0,0,1 */

3li:first-line{} /* a=0 b=0 c=0 d=2 ->优先级 = 0,0,0,2 */

4ul li {} /* a=0 b=0 c=0 d=2 ->优先级 = 0,0,0,2 */

5ulol+li{} /* a=0 b=0 c=0 d=3 ->优先级 = 0,0,0,3 */

6h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 ->优先级 = 0,0,1,1 */

7ulolli.red{} /* a=0 b=0 c=1 d=3 ->优先级 = 0,0,1,3 */

8li.red.level{} /* a=0 b=0 c=2 d=1 ->优先级 = 0,0,2,1 */

9#x34y {} /* a=0 b=1 c=0 d=0 ->优先级 = 0,1,0,0 */

10style="" /* a=1 b=0 c=0 d=0 ->优先级 = 1,0,0,0 */

了解了这些你应该不会再对"11个class与一个id谁的优先级高"这类的问题有疑问了吧，因为a，b，c，d只是在各自位置数字的累加，而不会越级。其实，这里还漏了一个重要的东西，那就是!important了，important可以让前面所有的权重计算变得可笑，因为css属性值添加了important后，前面所有的努力白费了行内式的权重也高不过它，除非再声明一个加important的属性值来覆盖它。

当你了解了各类选择器的使用及css内部权重问题后，那你css写出来就不会郁闷的发现什么也没有了。

评论：