正文

HTML选择器的四种使用方法

IP云
IP云V管理员/6 阅读
06/20
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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