您现在的位置是:主页 > Web前端技术 > Web前端技术

css选择器有多少种

IDCBT2021-12-24服务器技术人已围观

简介这篇文章主要介绍css选择器有多少种,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1、元素选择器 最常见的css选择器当属元素选择器了,在HTML文档中该

这篇文章主要介绍css选择器有多少种,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

1、元素选择器

最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素,例如:p,h3,span,a,p乃至html。

用法十分简单,例如:

html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h3 {background-color: red;}

以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h3元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构:由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为:属性名 : 属性值。如下图所示:

每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值,或者不正确的属性,则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。

我们举个不正确的例子:

p { background-color: red
    font-family: 黑体;
    wordsize: 20px;
    float: left;
  }

上面的例子第一条声明漏掉了分号,以上声明块会被解析为:

p {  background-color: red font-family: 黑体;
     wordsize: 20px;
     float: left;   
  }

red font-family: 黑体整个会被解析为background-color的属性值,这当然不是一个合法的属性值,该条声明将会被忽略掉。另外第二条声明使用了不正确的属性名wordsize,该条声明也将会忽略掉,结果只会正确处理第三条声明,等价于:

p {float: left;}

此外,我们也可以同时对多个html元素进行声明:

h2, h3, h4, h5, h6, h7, p {font-family: 黑体;}

这样会将文档中所有的h2~h7以及p元素字体设置为”黑体”。

如果我们希望一锅粥地选取所有的元素,可以使用通配符”*”:

* { font-size: 20px;}

这样所有的元素都将被选中,虽然font-size属性对于某些元素是无效的,那么它将被忽略。

2、类选择器

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)。

标签:

很赞哦! ()

本栏推荐