6.23 css综合选择器
综合选择器
后代选择器
后代选择的使用方法：d1 span {}（父代与子代之间用“空格”隔开）
!D<OCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*后代选择器*/
.d1 span {
color: blue;
}
/*选取class值为d1的标签的后代标签中，类型为span的标签*/
</style>
</head>
<body>
<div class="d1">
<span>我是子级span</span>
<div class="son">
<span>我是孙级span</span>
<div class="d2">
<span>我是重孙子span</span>
</div>
</div>
</div>
</body>
</html>
交集选择器
交集选择器的使用方法：
div.di {}：选中class值为di的div标签
em#i1 {}：选中id值为i1的em标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*选中div，并且这个div的class叫d1*/
div.d1 {
color: red;
}
/*选中em,并且这个em的id叫i1*/
em#d1 {
color:blue;
}
</style>
</head>
<body>
<div class="d1">我的名字叫d1，我是一个div</div>
<h1 class="d1">我的名字也是d1 ，但是我是一个h1</h1>
<em id="i1">我是em，我的名字也是d1</em>
<div>我是一个没有名字的div</div>
</body>
</html>
并集选择器
并集选择器的使用方法：
d1,#s1,p,em {}：标签名或class名或id名用“,”隔开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1,#s1,p,em {
color: red;
}
</style>
/*选中所有class名为d1 和 id名为s1 和 标签名为p，em的标签*/
</head>
<body>
<div class="d1">小和尚下山去化斋</div>
<p>
连言有交代
</p>
<em>
山下的沈钰是老虎
</em>
<span id="s1">
2232323
</span>
</body>
</html>
子元素选择器
子元素选择器的使用方法：
fa>em {}：选中id为fa的标签的直系子em标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#fa>em {
color: red;
}
</style>
/*选中二级em标签*/
</head>
<body>
<div id="fa">
<em>我是二级em</em>
<div class="son">
<em>我是三级em</em>
<div>
<em>我是四级em</em>
</div>
</div>
</div>
</body>
</html>
序列选择器
ul li {}：选择无序列表
ol li {}：选择有序列表
ul li:first-child{}：选择无序列表的第一个
ul li:last-child{}：选择无序列表的最后一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
ol li {
color:green;
}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<ol>
<li>li11</li>
<li>li22</li>
<li>li33</li>
</ol>
</body>
</html>
兄弟选择器
相邻兄弟选择器：div+p {} 选择同一级且在div之后紧挨div标签的p标签。（两个兄弟标签中间不能有其他标签插入）
普通兄弟选择器：div~p {} 选择同一级且在div之后的p标签。（兄弟标签之间不必紧挨）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*相邻兄弟选择器*/
/*div + p {
color: red;
}*/
/*普通兄弟选择器*/
div ~ p {
color: red;
}
/*p + p {
color: blue;
}*/
</style>
</head>
<body>
<div>
我是div
</div>
<p>我是p标签</p>
<p>我是第二个p标签</p>
</body>
</html>
css的继承性
父元素的某些css属性会被子元素无条件的继承过去。
关于文字的css属性都可被继承：color，text-，line-，font-。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">
<span>hello,world</span>
</div>
</body>
</html>
<!-- 子标签span会继承父标签div的color属性，所以span标签内的文字颜色为红色 -->
css的层叠性
层叠能够解决css冲突的问题，通过比较权重的方式。
选择器权重大小：!important>id > class > html （数量相同比较下一个）
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*id class html */
#box1 .hezi2 p { /* 1 1 1*/
color: red;
}
div div #box3 p { /*1 0 3*/
color: green;
}
div.hezi1 div.hezi2 div.hezi3 p { /*0 3 4 */
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
</html>
<!-- 全部选中p，比较权重，第一个权重最大，故遵从第一个css，文字为红色 -->
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 .hezi2 p {
color: red;
}
#box2 .hezi3 p {
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
</html>
示例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#hezi1 #hezi2 #hezi3 {
color: purple;
}
div.box div.box div.box {
color: green;
}
#hezi1 #hezi2 {
color: red;
}
#hezi3 {
color: blue;
}
</style>
</head>
<body>
<div class="box" id="hezi1">
<div class="box" id="hezi2">
<div class="box" id="hezi3">
<p>猜猜我是什么颜色?</p>
</div>
</div>
</div>
</body>
</html>
<!-- 都未选中，比较远近，遵从最接近的，相同远近，再比较权重，故文字颜色为紫色 -->
示例4：
!important 的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
color: red;
font-size: 20px;
}
#test {
color: blue;
font-size: 10px;
}
div {
color: green !important;
font-size: 100px;
}
</style>
</head>
<body>
<div class="d1" id="test">
hello,world
</div>
</body>
</html>
<1-- !important能够把“单独属性”的权重变为无限大，尽量少用 -->
块级元素和行内元素
块级元素和行内元素的区别
行内元素不能够设置宽度和高度，行内元素的宽度和高度是标签内容的宽度和高度；块级元素可以设置宽度和高度。
块级元素会独占一行，而行内元素却不能独占一行，只能和其他的行内元素共用一行。
如果块级元素不设置宽度，那么块级元素会自动占满父元素的全部宽度。
目前所知道的行内元素和块级元素有：
块级元素和行内元素之间的转换
通过display属性，inline把块级元素变成行内元素，block把行内元素变成块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d0 {
width: 300px;
height: 300px;
background-color: red;
display: inline; /*把块级元素变成了行内元素*/
}
.s1 {
width: 300px;
height: 300px;
background-color: blue;
display: block;/*将行内元素变成块级元素*/
}
</style>
</head>
<body>
<div class="d0">Hello,Div</div>
<span class="s1">hello,Span</span>
</body>
</html>
而display的inline-block值可以变成行内块元素。
两个行内块元素之间会有一条约3px的缝，可以使用float属性去掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
em {
width: 300px;
height: 300px;
background-color: green;
display: inline-block; /*行内块元素*/
}
/*行内块元素之间会有一条约3px的缝，两个并排的图片之间也存在，可以用float去掉*/
.d1 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
/*float: left;浮动*/
}s
.d2 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
/*float: left;*/
}
body {
background-color: #000;
}
</style>
</head>
<body>
<em>hello,Em</em> <a href="##">百度</a>
<hr>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
