css3选择器详细探索

最新推荐文章于 2022-11-28 22:50:35 发布

森林中的小屋

最新推荐文章于 2022-11-28 22:50:35 发布

阅读量1.3k

点赞数 1

分类专栏： Web基础 css基础文章标签： css3 选择器 css3选择器

本文链接：https://blog.csdn.net/xiaowu_hhb/article/details/53187493

版权

Web基础同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

css基础

4 篇文章 0 订阅

订阅专栏

css3选择器详细探索

可链接W3School详细查看

CSS3（以下简称C3）是一种用于屏幕上渲染html，xml的一种语言，C3主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。C3选择器分开成4部分，第一部分是我们常用的部分，叫做基本选择器；第二部分是层次选择器；第三部分是属性选择器；第四部分是伪类选择器，这一部分也是最难理解和掌握的部分。

一、基本选择器

二、层次选择器

三、属性选择器

示例1：

		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat] {background: red;}
		</style>
	</head>
	<body>
		<p cat="leo">leo</p>
		<p cat="dp">杜鹏</p>
		<p cat="zM">子鼠</p>
		<p cat="xm">小美</p>
	</body>

示例2：

		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat=leo] {background: red;}
		</style>
	</head>
	<body>
		<p cat="leo">leo</p>
		<p cat="dp">杜鹏</p>
		<p cat="zM">子鼠</p>
		<p cat="xm">小美</p>
	</body>

示例3：

		<style>
			p {height: 30px;border: 1px solid #000;}
			p[cat|=b] {background: #C3C;}
		</style>
	</head>
	<body>
		<p cat="b-leo">leo</p>
		<p cat="bleo">杜鹏</p>
		<p cat="b-leo">子鼠</p>
		<p cat="g-xm">小美</p>
		<p cat="b">无名氏</p>
	</body>

示例4：

		<style>
			p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}
			p a{background:url(../img/w.gif) no-repeat 3px center;padding-left:30px; display:block;}
			p a[href*=text]{ background-image:url(../img/text.gif);}
			p a[href*=pdf]{ background-image:url(../img/swf.gif);}
			p a[href*=exl]{ background-image:url(../img/x.gif);}
		</style>
	</head>
	<body>
		<p>
			<a href="http://www.baidu.com/doc/javascript.html">css3复习</a>
		</p>
		<p>
			<a href="http://www.baidu.com/text/javascript.html">css3复习</a>
		</p>
		<p>
			<a href="http://www.baidu.com/pdf/javascript.html">css3复习</a>
		</p>
		<p>
			<a href="http://www.baidu.com/exl/javascript.html">css3复习</a>
		</p>
	</body>

四、伪类选择器

示例：

改变单选框的大小和样式

		<style>
			label{ float:left;margin:0 5px; overflow:hidden; position:relative;}
			label input{ position:absolute;left:-50px;top:-50px;}
			span{float:left;width:50px;height:50px;border:3px solid #000;border-radius: 50%;}
			input:checked~span {background:red;}
		</style>
	</head>
	<body>
		<label>
			<input type="radio" name="tab" />
    		<span></span>
		</label>
		<label>
			<input type="radio" name="tab" />
    		<span></span>
		</label>
		<label>
			<input type="radio" name="tab" />
   			<span></span>
		</label>
	</body>

文本新增伪类

		<style>
			p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
			p:first-line{ background:red;}
			p:first-letter{ font-size:30px;}
			p::selection{background:#F60;color:#690;}
			p:before{ content:"cat"; display:block; border:1px solid #000;}
			p:after{ content:"cat"; display:block; border:1px solid #000;}
		</style>
	</head>
	<body>
		<p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
在 HTML5&CSS3 被炒至沸沸扬扬的今天，全面系统的掌握此项技能，是加重技术含金量的重要砝码！
		</p>
	</body>

森林中的小屋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3选择器详细探索

css3选择器详细探索可链接W3School详细查看CSS3（以下简称C3）是一种用于屏幕上渲染html，xml的一种语言，C3主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。C3选择器分开成4部分，第一部分是我们常用的部分，叫做基本选
复制链接

扫一扫