HTML选择器的四种使用方法

时间：2023-01-07 17:58:41

选择器<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

相关文章