一、复合选择器
1.并集选择器
并集选择器(css选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器,id选择器等),都可以作为并集选择器的一部分,如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的css样式。
/* 并集选择器,相同的放在一起,用逗号隔开 */
/* 并集选择器和的意思,只要逗号隔开的,所有选择器都会执行后面样式。 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.con1 {
color: green;
}
.con2 {
color: pink;
}
/* 两个名字字体都加粗,字体大小都是32px */
.con1,
.con2 {
font-weight: 700px;
font-size: 32px;
}
</style>
</head>
<body>
<div class="con1">哈哈哈</div>
<span class="con2">急急急</span>
</body>
</html>
结果为:
2.后代选择器
/* 后代选择器->用来选择元素或元素组的子孙后代->精准选择,中间用空格隔开 */
后代选择器又称为包含选择器,
用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写爷爷父亲,在写儿子孙子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li span {
/* 邓超变成粉色 */
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<span>邓超</span>
</li>
<span>陈赫</span>
</ul>
</body>
</html>
结果为:
3.子代选择器
/* 某元素**子元素(亲儿子)**的元素,使用>来表示子元素选择器,用大于号隔开 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li>span {
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<span>1111</span>
</div>
</li>
<li>
<!-- 变成粉色 -->
<span>22222</span>
</li>
</ul>
</body>
</html>
结果为:
3.复合选择器总结
二、标签的显示模式
1. <!-- div 块级元素,独占一行,可以设置宽和高 -->
<!-- 块级元素 p div h1-h6 li ul ol hr -->
2. <!-- span 行内元素,不独占一行,不可以设置宽和高,宽高由内容撑开 -->
<!-- 行内元素span a b strong i em u ins s del -->
3.<!-- 行内块元素 ,不独占一行,可以设置宽高-->
<!-- 行内块元素 img input button -->
三、显示模式的转换
<!-- 标签的嵌套关系 -->
<!-- 块级元素内可以放任何元素 -->
<!-- 行内元素内只能放文本或其他行内元素 -->
块级 block 转换成行内 display: inline;
块级 block 转换成行内块 display:inline-block
注意!错误写法:
<p>段落一
<p>段落二</p>
</p>
四、背景样式
/* 默认颜色transparent 透明色 */ background-color: transparent;
/* 背景重复 no-repeat 不重复 ,repeat 重复*/
/* 背景定位 水平方向 垂直方向*/ background-position: 20px 30px;
/* 右下 */ background-position: right bottom;
/* 居中 */ background-position: center center;
/* 背景图片 */ background-image: url(../img/yujinxiang.jpg); 红色字为图片路径
五、精灵图
简便方法:/* 选择画图工具直接框大小 */
width: 119px;截取的图片的宽度
height: 105px; 图片的长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 119px;
height: 105px;
/* 背景图片 */
background-image: url(../img/熊梓淇.jpg);
/* 图片定位 */
background-position: -770px -470px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
原图片:
结果为: