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>

转载于:https://www.cnblogs.com/frozeninferno/p/7079652.html