HTML选择器的四种使用方法

选择器<style>

为了让.html代码更加简洁，这里引入选择器style

本文总共介绍选择器的四种使用方式

一、选择器的四种形式

1.ID选择器

id表示身份，在页面元素中的id不允许重复，因此id选择器只能选择单个元素

2.类别选择器

选择拥有该类别的多个元素

3.标签选择器

根据标签名称，选择对应的所有标签

4.通用选择器

针对页面中的所以标签都生效

二、选择器的使用

这是一段没有使用选择器的html代码：

<!--这是一段未使用选择器的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="margin: 0;">
		<div id="banner">
			<img src="img1/img2.png" style="width: 100%;" >
		</div>
		<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">
			<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a>
			<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a>
			<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决方案</a>
			<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a>
			<a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a>
		</div>
		<div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">
			运用先进技术积极推动改变，让整个世界更美好。
		</div>
	</body>
</html>

使用选择器后：

<!--添加完选择器后的代码-->
<!DOCTYPE html>
<html style="background-color: gainsboro">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#navigation{
				height: 80px;text-align: center;line-height: 80px;background-color: white;
			}
			#botton{
				height: 40px;text-align: center;line-height: 40px;color: grey;
			}
			.nav{
				 text-decoration: none; color: black; margin: 0 15px;
			}
			#banner img{
				 width: 100%;
			}
		</style>
	</head>
	<body style="margin: 0;">
		<div id="banner">
			<img src="img1/img2.png">
		</div>
		<div id="navigation">
			<a href="#" class="nav" >关于我们</a>
			<a href="#" class="nav">我们的故事</a>
			<a href="#" class="nav">产品和解决方案</a>
			<a href="#" class="nav">新闻和活动</a>
			<a href="#" class="nav">联系我们</a>
		</div>
		<div id="botton">
			运用先进技术积极推动改变，让整个世界更美好。
		</div>
	</body>
</html>

1. ID选择器：

（先在head中添加<style><style\>标签）

以这段代码为例：

<div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;">

(1)为标签添加id属性，如：

<div id="navigation"><\div>

(2)将为标签属性style中的内容提取出来，移到head标签的style中，格式： #id{} 括号中存放css样式

<style>
     #navigation{
            height: 80px;text-align: center;line-height: 80px;background-color: white;
      }
<\style>

一个简单的id选择器就完成了，为id为navigation的标签添加括号中的样式。

2.类别选择器

与id选择器类似

（1）为标签添加class属性

<a href="#" class="nav" >关于我们</a>

（2）head中的格式：.class名{}

      .nav{
             text-decoration: none; color: black; margin: 0 15px;
      }

为所有class类名为nav的标签添加此属性

3.标签选择器

这个是最简单的,标签名加大括号

直接上例子：（为所有<a>标签添加属性）

      a{
	      text-decoration: none; color: black; margin: 0 15px;
	}

这里还有个特殊的使用方法

例如这段代码：

      <div id="banner">
            <img src="img1/img2.png">
      </div>

为id为banner的div标签中的所有img标签添加属性：

      #banner img{
             width: 100%;
      }

嗯。。。# id 标签名{}

4.通用选择器

*{}

※

这里涉及到一个选择器的权重问题，后面会专门介绍权重的计算问题，这里先简单的说一下。

选择器范围越小，优先级越高

行内样式>id选择器>类选择器>标签选择器>通用选择器

关于选择器权重问题，参考这篇文章：https://www.cnblogs.com/orangekk/p/14239135.html