当前博客:选择器的讲解:1.标签选择器

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


在写样式的时候,我们怎么才能为每个标签来赋予他的样式,要通过选择器,来匹配到相应的标签.本系列文章带兄弟们了解一下选择器

选择器分为两种,一种是基础选择器,一种是高级选择器.

基础选择器: 标签选择器,id选择器,类名选择器

高级选择器:后代选择器,交集选择器,并集选择器.

H5新增的选择器:属性选择器,子类选择器,关系型选择器,伪类选择器,伪选择器

我们本系列博客主要讲解以上这些选择器.

 

标签选择器

选择方法: 通过标签名去选择

书写方法:标签名

选择范围:网页主题中所有的同名标签.

基本用法:

<样式>
	 标签名{
		    属性名: 属性值;
  }
</样式>
Markup

下面我们看下示例代码和效果图

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

需要注意的是:标签选择器无视嵌套规则,都能进行识别!

 

用途:实现全选同名标签,可以同时设置公共样式

缺点:只能进行全选,不能进行单独的布局样式.

下篇我们来讲解id选择器和通配符选择器!

 

 

 

 

选择器的讲解:1.标签选择器