欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS样式选择器的使用（一）

程序员文章站 2022-05-01 17:09:01
...

常用的选择器
CSS选择器作用：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
分类：基本选择器和扩展选择器。
基本选择器：

  • 标签选择器：针对一类标签
  • ID选择器：针对某一特定的标签使用
  • 类选择器：针对i想要的所有标签使用
  • 通用选择器（通配符）：针对所有的标签都实用（不建议使用）
    下面就是详解代码：
    1标签选择器
    就是针对这个页面上的所有这类的标签。
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style type="text/css">
			p{
				font-size: 50px;
				color: aquamarine;
			}
		</style>
	</head>
	<body>
		<p>这个是前端开发中的标签选择器</p>
	</body>
</html>

2ID选择器：规定用#来定义
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style type="text/css">
			#id{
				font-size: 50px;
				color: green;
			}
		</style>
	</head>
	<body>
		<p id="id">这是ID选择器</p>
	</body>
</html>

ID选择器的命名规则：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
3类选择器：规定用圆点.来定义
和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<h3 class="class1  class2">我是一个h3</h3>

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style type="text/css">
			.class1{color: chartreuse;}
			.class2{font-size: 30px;}
			.name1{color: gold;font-size: 30px;}
			.name2{border: double;}
		</style>
	</head>
	<body>
		<p class="name1 name2">我是一个p</p>
		<h1 class="class1 class2">我是一个h2</h1>
	</body>
</html>

4通配符选择器
将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

举例：

<style type="text/css">
*/*定义通用选择器*，希望所有标签的上边距和左边距都为0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>
相关标签： 标签选择器

上一篇： substr() explode()函数

下一篇： 关于PHP中的trait简单介绍

推荐阅读