版权声明：出错请帮忙指出。 https://blog.csdn.net/sinat_25786399/article/details/82822463
群组选择器
给多个选择器添加同样的css样式效果。作用：优化代码,减少重复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1 {
background: pink;
}
.div2 {
background: red;
}
.div3 {
background: blue;
}
.div4 {
background: yellow;
}
.div5 {
background: green;
}
.div7 {
background: orange;
}
.div8 {
background: gray;
}
.div9 {
background: purple;
}
#h1 {
background: black;
}
/* .div6 { width: 100px; height: 100px; } */
/* 群组选择器写法
将所有需要添加样式效果的选择器名称以及符号都在一起,使用逗号做间隔,之后使用{},在其中添加需要的样式
注意:
1,任何类型的选择器都可以写成群组选择器形式
2,最后一个选择器之后,不要添加逗号
*/
.div1,
.div2,
.div3,
.div4,
.div5,
p,
#h1 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
/*
每个标签两个选择器，一个负责不同的属性效果背景颜色。一个负责 相同的属性效果，宽度高度
*/
<div class="div1 div6">1</div>
<div class="div2 div6">2</div>
<div class="div3 div6">3</div>
<div class="div4 div6">4</div>
<div class="div5 div6">5</div>
<p class="div7">6</p>
<p class="div8">7</p>
<p class="div9">8</p>
<h1 id="h1">9</h1>
</body>
</html>组合选择器
通过已有选择器的标签,给其他标签添加css样式效果
父子选择器
通过已有选择器的父级标签,给嵌套其中的子级或者后代标签,指定css样式效果，
父子选择器：给已有选择器标签之中的子代标签添加样式效果，选择器 > 添加样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1>a {
color: red;
}
</style>
</head>
<body>
<!-- 通过父级选择器,给子级标签添加样式效果 -->
<div class="div1">
上海
<a href="#">百度</a>
<p>
<a href="#">新浪</a>
</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .div1>a { color: red; } */
/* .div1 a { color: black; } */
/* .div1>div>p>a { color: green; } */
/* .div1 div>p>a { color: orange; } */
/* .div1 div a { color: pink; } */
/* .div1 div>a { color: yellow; } */
.div2 {
color: red;
}
.div2>span {
color: blue;
}
.div2>span>span {
color: green;
}
</style>
</head>
<body>
<!-- 父子,后代选择器的应用
1,父子,后代选择器可以实现多级别嵌套
2,父子,后代选择器可以实现联合应用
-->
<div class="div2">今天是周末了,<span>我很开心,<span>因为明天还要上自习</span></span>
</div>
<!-- <div class="div1">
<a href="#">搜狐</a>
<div>
<p>
<a href="#">新浪</a>
</p>
</div>
<h1>
<a href="#">百度</a>
</h1>
<ol>
<li>
<a href="#">腾讯</a>
</li>
</ol>
<form>
<div>
<p>
<a href="#">京东</a>
</p>
</div>
</form>
</div> -->
</body>
</html>后代选择器：给已有选择器标签之中的子代标签以及后代添加样式效果，选择器 (空格) 添加样式的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .div1>a { color: red; } */
/* 后代选择器
对子级标签,以及后代标签,都会起作用
*/
.div1 a {
color: pink;
}
</style>
</head>
<body>
<div class="div1">
<a href="#">百度1</a>
<a href="#">百度2</a>
<p>
<a href="#">搜狐</a>
</p>
</div>
</body>
</html>兄弟选择器
相邻兄弟选择器：给已有选择器标签之后,相邻的一个平级标签添加样式，选择器 + 添加样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1 {
color: red;
}
.div1+span {
color: blue;
}
</style>
</head>
<body>
<div class="div1">北京</div>
<重庆
<span>上海1</span>
<span>上海2</span>
</body>
</html>一般兄弟选择器：给已有选择器标签之后,所有的平级标签添加样式，选择器 ~ 添加样式对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1 {
color: red;
}
.div1~span {
color: blue;
}
</style>
</head>
<body>
<span>中国</span>
<div class="div1">北京</div>
<span>上海1</span>
<span>上海2</span>
<span>上海3</span>
<span>上海4</span>
</body>
</html>