2021年9月4日
1.CSS的选择器
css选择器是找到标签。想要对标签修饰，先找到标签。然后才能修饰。如果标签都找不对的话，那就废了
1.标签选择器
2.class选择器
3.id选择器
4.组合选择器
5.层级选择器
6.通配选择器
7.伪类选择器
每一个标签都有id class style name 这些属性
1.1id选择器
给一个标签写一个id属性，然后给一个id的值。通过这个id值找到这个标签
#id值 {}
【注意】：id必须是唯一的，class的值可以重复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
/* id选择器 s使用关键字 #id值
id必须是唯一的
*/
#wb {
color:tomato;
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
</head>
<body>
<div id="wb">落霞与孤鹜齐飞</div>
<div >秋水共长天一色</div>
</body>
</html>
1.2组合选择器
要修饰多个标签的时候，而且修饰的样式是一样的，这个时候可以写组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
/* 组合选择器，用的很多，页面上面很多都是一样的样式
这个时候可以组合选择器。使用逗号隔开
*/
#div1, .span1, p, footer {
color: #FF6347;
}
</style>
</head>
<body >
<!-- 给了四个标签，现在我要求四个标签的内容都是tomato颜色 -->
<div id="div1">众里寻他千百度</div>
<span class="span1">不教胡马度阴山</span>
<p>桃花坞里桃花庵</p>
<footer>呵呵哒</footer>
<header>嘻嘻哒</header>
</body>
</html>
1.3层级选择器
标签是可以嵌套标签的，一层一层的找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style type="text/css">
/* 一层一层的往下找
层级择器是用空格，每一个标签都是有关系的，子标签关系
*/
/* 我在找标签的时候，为什么不直接找到你？而是通过爷爷，父亲等找到你啊？
但是语法格式有这样的格式，有存在的意义。咱们有的时候层级太深的，单纯的直接
找某一个标签，是找不到的，必须通过他的父级标签来找到进行修饰
*/
#div1 .div2 div {
color: red;
}
#div4{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<div>仰天大笑出门去，我辈岂是蓬蒿人</div>
</div>
<div id="div3">
<div id="div4">磨刀霍霍向猪羊</div>
</div>
</div>
</body>
</html>
1.4通配选择器
所有的标签都可以生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 所有的标签都生效
*代表的所有
以后会用
*优先级比较低
*/
#div2{
color:darkred;
}
* {
color:tomato;
/* 开发的时候一般这样来用通配符
设置内边距和外边距为0。目的是让咱们整个网页充满整个电脑屏幕的页面
*/
margin: 0;
padding: 0;
}
div {
color:green;
}
.div1{
color:yellowgreen;
}
/* 通配 < 标签 < class < id选择器
不是就近的 是有优先级的！！！
*/
</style>
</head>
<body>
<div>
我去好困啊！！！
</div>
<div class="div1">我去想睡觉</div>
<div id="div2">我去睡吧</div>
<span>昔日龌龊不足夸</span>
</body>