本文详细介绍了CSS中的选择器类型，包括复合选择器、后代选择器、子元素选择器、交集选择器和并集选择器，并举例说明其用法。同时，讲解了标签显示模式，包括块级元素和行内元素的特点，以及如何转换显示模式。此外，还讨论了CSS背景的设置，如背景颜色、图片、平铺、位置和附着。最后，阐述了CSS的三大特性——层叠性、继承性和优先级，并通过实例展示了如何解决样式冲突。
学习目标：
1.复合选择器
后代选择器
并集选择器
2.标签显示模式
3.css背景
背景位置
4.css三大特性
优先级
css的复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
后代选择器
包含选择器
父级 写前面，子集写后边 ，中间必须用空格隔开
<style>
a{
text-decoration: none;
}
.nav a {
color: pink;
</style>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
第二个例子如下
<style>
.wangsicong ul li {
color: red;
}
</style>
<div class="wangsicong">
<ul>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
</ul>
</div>
只要发生嵌套，内层的标签就是外层标签的后代
子元素选择器
子元素选择器只能选择某元素（亲儿子）的元素
<style>
<!-- 后代选择器选择子孙后代 -->
div strong {
color: red;
}
/*子元素选择器，符合是>*/
div>strong {
color: pink;
}
</style>
交集选择器
既有标签1的特点 又有标签2 的特点
比如p.one选择的是：类名为.one的段落标签
不太常用
并集选择器（重点）
<style>
/*<!-- 客户需求：p和span都是红色的 -->*/
/*/*分开来写的*/
/*p {
color: red;
}
span {
color: red;
}*/
/*并集选择器用,隔开 通常用于集体声明，就是因为里面的样式相同*/
p,
span,
.red {
color: red;
}
</style>
<p>我和你</p>
<p>我和你</p>
<p>我和你</p>
<span>我和你</span>
<span>我和你</span>
<span>我和你</span>
<div class="red">我和你</div>
<div>我和你</div>
<h1>我和你</h1>
<h1>我和你</h1>
链接伪类选择器（重点）
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标移动到链接上
- a:active 选定的链接
需要注意：
按照顺序来写，不要调换位置lvha 顺序（爱上了又讨厌）
在实际工作中给链接单独指示样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*实际工作中要给链接单独指定样式*/
.nav a {
color: #333;
text-decoration: none;
}
/*鼠标放到nav里面链接才会变色*/
.nav a:hover {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://www.mi.com/us">小米手机</a>
</div>
</body>
</html>
标签的显示模式（重点）
理解：
1.标签有三种显示模式
2.标签以什么方式显示，比如div可以占一行，比如span可以一行放多个
标签的类型：
一般分为块标签和行内标签，也称为块元素和行内元素
块级元素：
如：<h1~h6>
div ul
块级元素的特点：
1.比较霸道，自己独占一行
2.高度、宽度、外边距以及内边距都可以控制
3.宽度默认是容器的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意：
1.只有文字才能组成段落，因此p不能放在块级元素，特别是p不能放在div
2.同理还有h1~h6，dt他们都是文字类块级标签，里面不能放入其他块级元素
p里面不能包含div，段落里面尽量不要放块级元素
行内元素
<a> <strong> <em> <b> <span> <i> <del> <s> <ins> <u>
有的地方也称内联标签
特点：
1.相邻行内元素在一行，一行可以显示多个
2.高宽直接设置是无效的
3.默认宽度就是他本身内容的宽度
4.行内元素只容纳文本或其他行内元素
注意：
1.链接里不能再放链接
2.特殊情况a里面可以放块集元素，但是a转换一下块级模式是最安全的
****行内块元素inline-block
<img /> <input/> <td>
特点：
1.和相邻行内元素（行内块）在一行上，但之间会有空白缝隙，一行可以显示多个。
2.默认宽度就是它本身的内容宽度
3.高度、行高、外边距以及内边距都可以控制
标签显示模式转换display
1.块级转为行内元素：display:inline
2.行内转块级：display:block
3.块级元素、行内元素都可以转换成行内块元素；display:inline-block
line-height 行高
理解：
1.能够说出行高和高度的三种关系
2.能理解行高等于高度，单行文字会垂直居中
应用：
1.使用行高实现单行文字垂直居中
2.能会测量行高
测量行高的方法如下：
1.选择faststone 工具截取网页截图，保存到桌面
2.打开firework，用它打开截图
3.用切片工具，从上一行文字底下量到下一行文字底下
单行文字垂直居中
行高=上距离+内容高度+下距离
行高在系统默认里就是16px
1.行高=高度 文字会垂直居中
2.行高>高度 文字会偏下
3.行高<高度 文字会偏上
口诀：文字的行高=盒子的高度
css的背景（background）
css背景图和插入图片的区别
transparent默认为背景色透明
background-image：ul （none）
background-image: url(gril.jpeg)
背景图片是放在文字的底部
小技巧：
背景图片后边的地址ul不要加引号
背景平铺
background-repeat : no-repeat /repeat-x/repeat-y
背景位置(重点）
position 位置
注意：
1.必须制定background-image的属性
2.position后边跟x和y坐标，通过方位更改、
方位名词的顺序没有关系，谁在前后都可以
*背景位置*/
/*background-position: x坐标 y坐标;*/
/*background-position: right top;(右上角)*/
/*background-position: left bottom(左下角);*/
/*background-position: center center(水平居中 垂直居中）*/
/*background-position: left center(水平靠左，垂直居中);*/
3.如果只指定了一个方位词，另一个默认为居中
4.精确数值第一个肯定是x坐标，第二个肯定是y坐标
5.如果只写了一个精确值，说明x是精确值，y默认是垂直居中
注意：
遇到超大的背景图，他的位置为：center，top
body {
height: 3000px;
background-image: url(images/sm.jpg);
background-repeat: no-repeat;
/*这种写法是我们以后超大背景的的写法，背景定位*/
background-position: center top;
}
背景附着
background-attachement：scroll（滚动的）/fixed （固定的）
浏览器默认状态下是滚动的
背景简写
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置*/
background: #ccc url(images/star.jpg) no-repeat fixed top center;
顺序可以自由换
背景透明
盒子是半透明效果
background: rgba(0,0,0,0.3)
1.rgb是颜色，a是透明度，透明度范围是：0~1之间，例如：0.3代表30%的透明度
2.我们习惯把0.3中的0省略掉，写.3
3.背景的半透明是指盒子的半透明，里面不受影响
4.兼容性问题，低于ie9 的版本不支持
css的三大特性
理解：
1.能说出css样式冲突采取的原则
2.能说出那些常见的样式会有继承
应用：
1.能写出css优先级算法
2.能会计算常见选择器的叠加值
css的层叠性
多种css样式的叠加，就近原则
样式不冲突，不会重叠
口诀：长江后浪推前浪，前浪被拍死在沙滩上
继承性
子承父业
给父级元素赋予属性
可以降低css的复杂性
（text font line 开头的，以及color属性可以继承的）
口诀：龙生龙，凤生凤，生来老鼠会打洞
css优先级（重点）
1.权重计算公式
选择器相同：则执行层叠性
选择器不同，就会出现优先级问题
权重计算公式如下：
标签选择器计算权重公式
继承或* 0,0,0,0
每个元素（标签选择器）0,0,0,1（小组长）如：a
每个类（类选择器） 0,0,1,0（班长）如：nav
id 0,1,00（班主任）
每个行内样式 style 0,1,0,0（校长）
每个important 重要的 无穷大 写法：！important （教育部）
权重叠加
div ul li :0,0,0,3
.nav ul li: 0,0,1,2
a:hover : 0,0,1,1
.nav a:0,0,1,1
注意：
- 之间是没有进制的如：
0,0,0,5+0,0,0,5=0,0,0,10
其中10是不能进位的
2. 继承的权重是0
其实我们修改样式一定要看该标签有没有被选中
1.如果选中了，那么以上面公式来计算权重，谁大听谁的
2.如果没选中，那么权重是0，因为继承的权重是0
<style>
div {
color: red;
}
p {
color:green;
}
.demo p {
color: blue
}
</style>
</head>
<body>
<div class="demo">
<p>继承权重未0</p>
</div>
扫一扫
4211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
