给碌碌无为的自己,留下一点痕迹,证明自己曾经来过。
学习"学习"
学习 "表达"
学习取解决生活中的各个问题
下周可能就是react-router-v6的学习笔记还是博客? 尽量做到一周一篇吧
常用的选择器
CSS中，选择器用来指定网页上我们想要样式化的HTML元素。
列表选择器
选择器与选择器之间通过,连接，表示都选择
<html lang="en">
<head>
<style>
.box1,.box2{
background-color: rgb(178, 215, 186);
width: 200px;
height: 200px;
margin: 1px;
}
</style>
</head>
<body>
<div class="box1">
我会被选中
</div>
<div class="box2">
我也会被选中
</div>
</body>
</html>
.box1和.box2之间通过,连接。表示选择box1和box2
交集选择器
<style>
.seletor1.seletor2{
width: 400px;
height: 200px;
background-color: aqua
}
</style>
<div class="seletor1 seletor2">
交集选择器: <code>seletorName1seletorName2</code> 选中,没有任何间隔
</div>
元素必须同时拥有选择器seletor1和seletor2才行
ID选择器
通过#seletorName的方式选择，将CSS规则添加到元素上，通常用于选择某一个元素。因为id是元素独一无二的。
<style>
#id-seletor{
width: 400px;
height: 400px;
border: 1px solid;
background-color: bisque;
}
</style>
<body>
<div id = "id-seletor">
我会被 <code>#id-seletor</code> 选中,因为我是id选择器
</div>
</body>
效果图如下所示：
类选择器
通过.className的方式选择,某一类标签。
<style>
.class-seletor{
width: 200px;
height: 200px;
border: 1px solid;
background-color: bisque;
}
</style>
<body>
<div class = "class-seletor">
我会被 <code>.class-seletor</code> 选中
</div>
<div class = "class-seletor">
我也会被 <code>.class-seletor</code> 选中
</div>
</body>
选择 class="calss-seletor"的这一类元素
直接子代选择器
通过 >符号选择选择器 fater > son.
<html lang="en">
<head>
<style>
.father-seletor{
width: 400px;
height: 400px;
border: 1px solid;
background-color: bisque;
}
.father-seletor > .son{
background-color: white;
width: 300px;
height: 200px;
}
.father-seletor > div{
border: 1px solid red;
}
</style>
</head>
<body>
<div class = "father-seletor">
我是father
<br>
我会被 <code>.father-seletor</code> 选中
<div class="son">
我是son
<br>
我会被<code> .father > .son </code>选中
<br>
我也会被<code> .father > div </code>选中
</div>
</div>
</body>
</html>
选择的是直接后代元素：
注意：从上图可以看到，当不同的选择器选择的是同一个元素时，两个选择器的css规则都起了作用，这是因为这两个选择器中的规则没有重复。当两个css选择器在规则上具有重复时 如.father > div选择器中添加width:400px则上图中son的宽度则为400px; 因为后者重写了width规则
后代选择器
通过 father son的形式选择需要的元素
<html lang="en">
<head>
<style>
.father-seletor{
width: 400px;
height: 400px;
border: 1px solid;
background-color: bisque;
}
.father-seletor > .son{
background-color: white;
width: 300px;
height: 200px;
}
.father-seletor p{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class = "father-seletor">
我是father
<br>
我会被 <code>.father-seletor</code> 选中
<div class="son">
我是son
<br>
我会被<code> .father .son </code>选中
<br>
<div>
<p>我是div中的p标签我会被<code>.father-seletor p</code>选中</p>
<p> 注意：<code>.father-seletor</code> 和<code>p</code> 中间有个空格哦!</p>
</div>
</div>
</div>
</body>
</html>
效果如下
一般兄弟选择器和紧邻兄弟选择器
一般兄弟选择器：元素与元素之间 拥有共同的父类元素, 通过~连接兄弟元素
<html lang="en">
<head>
<style>
.father-seletor {
width: 400px;
height: 400px;
border: 1px solid;
background-color: bisque;
}
.son1{
background-color: red;
height: 100px;
width: 396px;
border: solid 1px black;
margin: 1px;
}
.son1 + .son2{
background-color: red;
height: 100px;
width: 394px;
border: solid 2px black;
margin: 1px;
}
.son1 ~.son3{
background-color: gray;
height: 100px;
width: 390px;
margin: 1px;
border: solid 4px black;
}
</style>
</head>
<body>
<div class="father-seletor">
我是father
<br>
我会被 <code>.father-seletor</code> 选中
<div class="son1">
我是son1
</div>
<div class="son2">
我是son2 我会被<code>.son1 + .son2</code>选中 因为我们是紧邻兄弟选择器。拥有共同的father
</div>
<div class="son3">
我是son3 我会被<code>.son1 ~ .son2</code>选中 因为我们是一般兄弟选择器。也拥有共同的father
</div>
</div>
</body>
</html>
