CSS02 - 选择器

桃夭十一里

关注

发布于: 2021 年 01 月 06 日

选择器

css 常用的基本选择器有四个：标签选择器、类选择器、id 选择器、通配符选择器

优先级

!important > 行间样式 > id 选择器 > class 选择器 > 标签选择器 > 通配符选择器

标签选择器

直接在 css 中写上标签名，会选中页面中的所有标签并为相应标签应用样式。如：

div {	height: 150px;}

复制代码

class 选择器

对指定标签添加属性 class=“自定义属性名”，之后在 css 中以“.相应属性名”的方式对其定义样式。不同的标签可以有相同的 class 名，同一个标签可以有不同的 class 名字，不同的 class 名字以逗号“，”隔开（如“class=“学生，小明，小男孩”）。类选择器好比人的名字，是可以多次、重复使用的。如：

<head>		<style>  		.box {        color: red;    }  </style></head><body>	<div class="box">测试div标签</div>	<p class="box">测试p标签</p></body>

复制代码

上述代码结果如下

id 选择器

W3C 标准规定，在同一个页面内，不允许有相同名字的 id 对象出现。id 选择器好比人的身份证号码，全中国是唯一的，不得重复（其实可以重复并且能成功应用定义的样式，但是在应用 JavaScript 时会出现错误，故不要定义重复 id 名），一个页面中只能定义一次。对指定标签添加属性 id=“自定义属性名”，之后在 css 中以“#相应属性名”的方式对其定义样式。如：

<head>	<style>		#box {   			 height:150px;		}	</style></head><body><div id="box"></div></body>

复制代码

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{    属性1:属性值1;     属性2:属性值2;      .......}

复制代码

选择器规则

当一个 rule 包含多个选择器时，每个选择器必须独占一行，示例：

/* good */.post,.page,.comment {    line-height: 1.5;}/* bad */.post, .page, .comment {    line-height: 1.5;}

复制代码

选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */#username input {}.comment .avatar {}/* bad */.page .header .login #username input {}.comment div * {}

复制代码

发布于: 2021 年 01 月 06 日阅读数: 31

原文链接:【http://xie.infoq.cn/article/365da5ca7d64bc2cc7eb16c55】。

桃夭十一里

关注

所思在远道 2020.08.19 加入

一只慢慢进步的小白

发布

暂无评论

创作场景

CSS02 - 选择器

选择器

优先级

标签选择器

class 选择器

id 选择器

通配符选择器

选择器规则

桃夭十一里

评论