CSS选择器

最新推荐文章于 2025-03-06 12:11:45 发布

量变决定质变

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量807

点赞数

分类专栏： ————CSS

本文链接：https://blog.youkuaiyun.com/nangeali/article/details/51777857

版权

————CSS 专栏收录该内容

39 篇文章

订阅专栏

CSS选择器

选择器：是CSS中的一个概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

用户只需要通过选择器，就可以对不同的HTML标签进行控制，赋予各种样式的声明，即可实现各种效果。

主要分为标记选择器，类别选择器，ID选择器。

标记选择器

一个HTML页面由很多不同的标记组成，标记选择器就是声明哪些标记采用哪种CSS样式。

比如，通过h1选择器来声明页面中所有的<h1>标记的CSS风格。

<span style="font-size:24px;"><style>
	h1{
		color:red;
		font-size:25px;
	}
</style>
</span>

每一个CSS选择器都包含选择器本身，属性和值，其中属性和值可以设置多个，从而实现对同一个标记，设置多种样式风格。

类别选择器

标记选择器一旦声明，页面中所有的该标记都会产生相应的变化，如果希望对其中的某个标记进行设置，就需要类别选择器。

类别选择器的名称，由用户自定义，属性和值跟标记选择器一样。

<span style="font-size:24px;"><html>
	<head>
		<title>
			class选择器
		</title>
		<style type="text/css">
			<!--
			.one{
			color:red;
			font-size:18px;
		}
			.two{
			color:green;
			font-size:20px;
		}
			.three{
			color:cyan;
			font-size:22px;
		}
			-->
		</style>
	</head>
	
	<body>
		<p class="one">class选择器1</p>
		<p class="two">class选择器2</p>
		<p class="three">class选择器3</p>
		<h3 class="two">h3同样适用</h3>
	</body>
</html>
</span>

此外，类别选择器还有一种直观的使用方法，就是直接在标记声明后结类别名称，以此来区别该标记。

在HTML标记中，可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。

这在实际制作网页的时候很有用，可以减少代码的长度。

<span style="font-size:24px;"><html>
	<head>
		<title>
			同时使用两个class
		</title>
		<style type="text/css">
			<!--
			.one{
			color:blue;
		}
			.two{
			font-size:22px;
		}
			-->
		</style>
	</head>
	
	<body>
		<h4>一种都不使用</h4>
		<h4 class="one">只是用第一种样式</h4>
		<h4 class="two">只是用第二种样式</h4>
		<h4 class="one two">同时使用两种样式，同时使用</h4>
		<h4></h4>
	</body>
</html>
</span>

ID选择器

使用方法和class选择器基本相同，区别，ID选择器只能在HTML页面中使用一次，其针对性更强。

在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。

在很多浏览器中，ID选择器也可以用于多个标记，但是，将ID选择器用于多个标记是错误的，因为，每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用，

如果一个HTML中，有两个相同的id的标记，那么将会导致JavaScript在查找id时出错，例如函数：getElementById()。

正因为JavaScript等脚本语言，也能调用HTML中设置的id，因此，ID选择器一直被广泛的使用。

<span style="font-size:24px;"><html>
	<head>
		<title>
			同时使用两个class
		</title>
		<style type="text/css">
			<!--
			#one{
			font-weight:bold;
		}
			#two{
			font-size:30px;
			color:#009900;
		}
			-->
		</style>
	</head>
	
	<body>
		<p id="one">ID选择器1</p>
		<p id="two">ID选择器2</p>
		<p id="two">ID选择器3</p>
		<p id="one two">ID选择器3</p>
	</body>
</html>
</span>

网站建设者，应该养成良好的习惯，一个id最多只能赋予一个HTML标记。

最后一行没有任何的效果显示，意味着ID选择器不支持类别选择器，那样的多风格同时使用，这是错误的写法。