深入理解CSS3选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/a732894380/article/details/83352692

本文详细探讨了CSS3选择器的四大类别：基本选择器、层次选择器、属性选择器和伪类选择器。通过示例介绍了如何使用这些选择器来精准定位和美化HTML元素，特别是伪类选择器的运用，对于元素状态的改变至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3选择器详细探索

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>