CSS基础篇【1】基础选择器

最新推荐文章于 2024-07-25 14:15:14 发布

chocTaco

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量92

点赞数 1

分类专栏： Web前端【HTML+CSS】文章标签： css html5 javascript

本文链接：https://blog.csdn.net/m0_46588584/article/details/120633266

版权

Web前端【HTML+CSS】专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS基础篇【1】基础选择器

html：                                         结构
css：                                           样式
JavaScript：                                行为
CSS：Cascading Style Sheet 层叠样式表

一、引入CSS

1、行间样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
<body>
	<div style="
			width: 100px;
			height: 100px;
			background-color: red;
	"></div>
</body>
</html>

2、页面级CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
		div
		{
			width: 100px;
			height: px;
			background-color: green;
		}
	</style>
</head>

3、外部CSS文件（最实用）

①首先在HTML中在head中添加Link标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<!-- <style type="text/css">
		div
		{
			width: 100px;
			height: px;
			background-color: green;
		}
	</style> -->
	<link rel="stylesheet" type="text/css" href="lesson2.css">
</head>
<body>
 	<div></div>
</body>
</html>

②创建css文件

div
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: black;
}

二、CSS选择器

①ID选择器(一对一关系)

<div id="only">123</div>

#only
{
	background-color: black;
}

②class选择器

1个class对应多个标签

<div class="demo">123</div>
<div class="demo">234</div>

.demo{
	background-color: yellow;
}

一个标签对应多个class

<div class="demo demo1">123</div>// 中间添加空格即可

.demo{
	background-color: yellow;
}

.demo{
	color: f40;
}

③标签选择器（所有标签加持css效果）(无论是否嵌套)

<div>123</div>
<div>234</div>

div{
	background-color: black;
}

④通配符选择器

所有标签全加持css，即整个页面

*{
	background-color: green;
}

⑤属性选择器

1、[id]{
}
2、[id = "only"]{
}
3、[class]{
}

三、CSS选择器优先级

结果：行间样式 >> ID >> Class == 属性选择器 >> 标签选择器 >> 通配符
##############优先级一样比较先后顺序############

<div style="background-color: red;">123</div>

div{
	background-color: green!important;
}

所以 !important 优先级最高

四、CSS权重

！important                     infinity
行间样式                            1000
id                                        100
class|属性|伪类                    10
标签|伪元素                           1
通配符                                   0

上述采用的是256进制计算机中 infinity*2 > infinity