首页 前端知识 HTML_CSS的基本选择器的使用及其作用范围和优先级

HTML_CSS的基本选择器的使用及其作用范围和优先级

2024-02-23 11:02:33 前端知识 前端哥 185 297 我要收藏

目录

  • ✨CSS的使用:
      • 行内样式
      • 内部样式
      • 外部样式
  • ✨CSS基本选择器:
      • id选择器
      • class选择器
      • 标签选择器
  • ✨优先级:
      • 选择器的优先级
      • 样式表的优先级

✨CSS的使用:

根据定义CSS的位置不同,分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;

一般在测试的时候使用居多:
语法:
<标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello my css</标签>
案例:
<div style="color: red; width: 100px; height: 100px;background-color: #acacac" >第一个div</div>

运行结果:

在这里插入图片描述

弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。

内部样式

定义在head标签内,通过style标签,该标签内容就是CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  div{
    color: red;
  }
</style>
<body>
<div>第一个div</div>
</body>
</html>

运行结果:

在这里插入图片描述

外部样式

1、提前定义css资源文件
2、在head标签内,定义link标签引入外部样式文件。

try.css文件定义在与html页面同级的css文件夹中 例如:
在这里插入图片描述
写入:

div {
color: red;
}

html文件中写入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="demo1.css">
</head>

<body>
<div>第一个div</div>
</body>
</html>

同样的样式作用在同一个标签身上:就近原则;不同样式作用在同一个标签身上:叠加生效。

运行结果:

在这里插入图片描述

✨CSS基本选择器:

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- id选择器 -->
		<style>
			#myDiv{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="myDiv">文字1</div>
	</body>
</html>


运行结果:

在这里插入图片描述

class选择器

选择具有相同的class属性值的元素

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- class选择器 -->
		<style>
			.myClass{
				color: #800080;
			}
		</style>
	</head>
	<body>
		<div class="myClass">文字1</div>
		<div class="myClass">文字2</div>
	</body>
</html>

运行结果:

在这里插入图片描述

标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 标签选择器 -->
		<style>
			p{
				color: chartreuse;
			}
		</style>
	</head>
	<body>
		<p>文字1</p>
		<p>文字2</p>
	</body>
</html>

运行结果:

在这里插入图片描述

✨优先级:

选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

样式表的优先级

行内样式 > 内部样式 >外部样式

同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2535.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!