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

【CSS3】基本选择器

程序员文章站 2022-03-03 07:57:53
...

基本选择器

标签选择器

  语法 ：

标签名{ 属性: 值;  }

  CSS Code ：

p{ color: tomato; }

类选择器

  语法 ：

.类名{ 属性: 值;  }

  CSS Code ：

.first{ color: tomato; }
.nav{ font-size: 32px; }

  HTML Code ：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>类选择器</title>
	<style type="text/css">
		.first{
			color: tomato;
		}
		.second{
			color: yellowgreen;
		}
	</style>
</head>

<body>
	<p class="first">微微一笑很倾城</p>
	<p class="second">微微一笑很倾城</p>
</body>
</html>

  ※设置完类选择器后，使用标签的class属性引用样式。即<标签名 class=".类名"></标签名>。
  类选择器在页面中可以多次使用。

id选择器

  语法 ：

#id名{ 属性: 值;  }

  CSS Code ：

#first{ color: tomato; }
#nav{ font-size: 32px; }

  HTML Code ：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>id选择器</title>
	<style type="text/css">
		#first{
			color: tomato;
		}
		#second{
			color: yellowgreen;
		}
	</style>
</head>

<body>
	<p id="first">微微一笑很倾城</p>
	<p id="second">微微一笑很倾城</p>
</body>
</html>

  ※设置完id选择器后，使用标签的id属性引用样式。即<标签名 id="id名"></标签名>。
  ※同一个id选择器在同一个页面中只能使用一次，如下图，这种使用方法是错误的。

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>同一个id选择器在同一个页面中只能使用一次</title>
	<style type="text/css">
		#first{
			color: tomato;
		}
	</style>
</head>

<body>
	<p id="first">微微一笑很倾城</p>
	<p id="first">微微一笑很倾城</p> //错误，id选择器只能使用一次
</body>
</html>

选择器优先级

  ※选择器优先级 ：

id选择器 > 类选择器 > 标签选择器

  HTML Code ：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器优先级</title>
	<style type="text/css">
		p{
			color: orange; //标签选择器，p标签变为橙色
		}
		.yellowgreen{
			color: yellowgreen; //类选择器，p标签变为黄绿色
		}
		#tomato{
			color: tomato; //id选择器，p标签变为番茄色
		}
	</style>
</head>

<body>
	<p class="yellowgreen" id="tomato">微微一笑很倾城</p>
</body>
</html>

  如上图，最终p标签变为番茄色。
  如果删除id选择器，则p标签变为黄绿色。

选择器命名规范

※选择器名称可以由英文字符、数字、下划线（_）、中划线（-）组成

※不能以数字开头

使用小写英文字符

使用具有语义化的单词命名

不要和id选择器同名

我寻见一片海 碧蓝且耀着光
大片船只航行其上 都向着远方

                         Shared by Foriver_江河



© 1997-2020 江河 All Rights Reserved.
相关标签： 【CSS3】 css css3

上一篇： 【HTML5】视频标签和音频标签

下一篇： css3知识分析1

推荐阅读