当前博客：选择器的讲解:3.类名选择器

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

收藏内容 (0) (0)

博客作者：【握紧一棵草】

个性签名：前端看我

类名选择器是我们在众多选择器中使用最多的选择器.

类名选择器

通过标签上的类名属性进行选择

书写方法: .匹配对应的类名

选择范围:选择所有同名类名属性标签

基本使用:

网页主题部分:

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

样式部分:

.标签类名{
      属性名:属性值;
}

下面看下示例代码及效果

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

一个标签的类名属性值可以有一个或者多个,需要用空格隔开,下面看下书写示例及效果

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