当前博客:选择器的讲解:2.id选择器、通配符选择器

142 次浏览【转载需注明来源】


id选择器

通过标签上id属性进行选择

书写方法: #id属性值(自定义)

选择范围:只能选中一个标签

基本用法:

网页主体中:

<任意标签 id="id名"></任意标签>

样式中:

#id名{
      属性名:属性值
}

看下示例代码及效果~

<网页 语言代码="中文">
	<网页头部>
		<网页信息 文档编码="UTF8" />
		<网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
		<网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
		<网页标题>选择器的讲解</网页标题>
		<样式>
		    #我是区块1{
		        文本颜色: 颜色值-红色;
		    }
		    #我是区块2{
		        文本颜色: 颜色值-蓟色;
		    }
		</样式>
	</网页头部>
	<网页主体>
		<!--这里编写网页代码-->
		<区块 id="我是区块1">区块1</区块>
		<区块 id="我是区块2">区块2</区块>
	</网页主体>
</网页>

id其实就算是标签的身份证号,具有唯一性,规定一个页面中不允许有同名的id属性

优点:id属性的权重高

缺点:只能实现单选

注意:小程序中不推荐使用id选择器,会报错

 

 

 

通配符选择器

书写方法: *{}

选择范围:选择包含网页主题标签在内的所有标签

通配符*后面添加的样式,每一个标签都会加载一次.

我们通常使用它清除页面的默认样式.

 

看下示例代码及效果~

 

<网页 语言代码="中文">
	<网页头部>
		<网页信息 文档编码="UTF8" />
		<网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
		<网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
		<网页标题>选择器的讲解</网页标题>
		<样式>
		    *{
		        文本颜色: 颜色值-橙色;
		    }
		</样式>
	</网页头部>
	<网页主体>
		<!--这里编写网页代码-->
		<区块>区块1</区块>
		<区块>区块2</区块>
		<标题1>我是标题1</标题1>
		<标题2>我是标题2</标题2>
	</网页主体>
</网页>

清除默认样式中内外边距的写法

		<样式>
		    *{
		        外边距: 0;
		        内边距: 0;
		    }
		</样式>

 

下篇文章我们来了解一下类名选择器

选择器的讲解:2.id选择器、通配符选择器