当前博客：选择器的讲解:6.子类选择器

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

收藏内容 (0) (0)

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

个性签名：前端看我

子类选择器的作用是匹配某些父元素的子节点来用的.

子类选择器分两种: 不区分子元素类型的,区分子元素类型的

我们先看不区分子元素类型的,

下面看下代码示例及效果

<!文档类型 网页类型>
<网页 语言代码="中文">
	<网页头部>
		<网页信息 文档编码="UTF8" />
		<网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
		<网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
		<网页标题>选择器的讲解</网页标题>
		<样式>
		段落:first-child{
		    /*这里匹配的是第一个子元素*/
		    文本颜色: 颜色值-粉色;
		}
		段落:last-child{
		    /*这里匹配的是最后子元素*/
		    文本颜色: 颜色值-青色;
		}
		段落:子元素(2n){ /*这里匹配的是第x n个子元素*/
		    背景-颜色: 颜色值-橙色;
		}
		段落:子元素(4){ /*这里匹配的是第4个子元素*/
		    背景-颜色: 颜色值-蓟色;
		}
	
		</样式>
	</网页头部>
	<网页主体>
		<!--这里编写网页代码-->
		<区块>
		    <段落>我是段落</段落>
	    	<标题1>我是1级标题</标题1>
	    	<标题1>我也是1级标题</标题1>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
		</区块>

	</网页主体>
</网页>

子类选择器(不区分子元素类型):任意类型标签都是父节点的子元素

选择器:first-child,代表的含义是匹配某一个父元素的第一个子标签

选择器:last-child,代表的含义是匹配某一个父元素的最后一个子标签

选择器:nth-last-child(索引值),代表的含义是匹配某一个父元素的索引值为几的倒数的子标签

选择器:子元素(索引值),代表的含义是匹配某一个父元素的索引值为几的子标签.(索引值从1开始)

下面我们开始将另一种区分子元素类型的标签:匹配到某一个父元素内部某一类型的子节点

看下代码示例及效果

<!文档类型 网页类型>
<网页 语言代码="中文">
	<网页头部>
		<网页信息 文档编码="UTF8" />
		<网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
		<网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
		<网页标题>选择器的讲解</网页标题>
		<样式>
		段落:first-of-type{
		    /*这里匹配的是父节点元素内部段落类型的第一个子节点*/
		    文本颜色: 颜色值-粉色;
		}
		段落:last-of-type{
		    /*这里匹配的是父节点元素内部段落类型的最后一个子节点*/
		    文本颜色: 颜色值-青色;
		}
		段落:nth-of-type(2n){ /*这里匹配的是第x n个子元素*/
		    背景-颜色: 颜色值-橙色;
		}
	
		</样式>
	</网页头部>
	<网页主体>
		<!--这里编写网页代码-->
		<区块>
		    <段落>我是段落</段落>
	    	<标题1>我是1级标题</标题1>
	    	<标题1>我也是1级标题</标题1>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
	    	<段落>我是另一个段落</段落>
	    	<段落>我还是一个段落</段落>
	    	<标题6>注意啊 我是标题6</标题6>
		</区块>

	</网页主体>
</网页>