css进阶版，常用知识总结

选择器的进阶

复合选择器

1.后代选择器：空格

• 选择器1 选择器2{css}
• 代表选中选择器1下面的所有满足的选择器2的标签（包括儿子，孙子）进行设置css样式

---

2.子代选择器：>

• 选择器1>选择器2{css}
• 在选择器1的儿子中选择满足选择器2的标签进行css样式设置

并集选择器

• 并集选择器：，
• 选择器1，选择器2...{css}
• 选中满足选择器1和满足选择器2的标签进行css样式设置，就类似与数学里面的并集操作，对于标签是累加的一个过程

交集选择器

• 交集选择器：选择器1选择器2{css}
• 选中满足选择器1的同事也要满足选择器2的标签才会对他们里面的内容进行css样式设计（既...又...）

• 注意：若有标签选择器，它必须在前面

hover伪类选择器

• :hover{css}
• 伪类选择器选中元素的某一种状态，是只有当鼠标悬停的时候才会出现设置的css样式

emment语法

• 通过简写语法，快速生成代码

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div c1ass="red"></div>
id选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{我是li的内容}	<ul><li>我是li的内容</li></u1>
创建多个	ul>li*3	<u1><li></ li><li></li><li></li></u1>
小结：

背景相关属性

• 背景颜色：background-color

  • 透明:raba(0,0,0,0)、transparent；背景不会影响盒子的大小，因为默认背景颜色是透明的，一般会先设置背景在进行编码，最后在清除背景颜色。

• 背景图片：background-image

  • 默认图片会平铺满父级大小，会水平和垂直方向平铺；不会撑开盒子的大小

• 背景平铺：background-repeat

  • 属性值简介

  取值	效果
  repeat	(默认值)水平和垂直方向都平铺
  no-repeat	不平铺
  repeat-x	沿着水平方向(x轴)平铺
  repeat-y	沿着垂直方向(y轴）平铺

• 背景位置: background-position

  • 属性值默认为水平方向 垂直方向

  垂直方向\水平方向取值	left	center	right
  top	(left,top)	(center,top)	(right,top)
  center	(left,center)	(center,center)	(right,center)
  bottom	(left,bottom)	(center,bottom)	(right,bottom)

• 背景连写：background

  • 推荐写法：background：color image repeat position

关于连写的注意点

• 如果需要设置单独的样式和连写 ① 要么把单独的样式写在连写的下面 ② 要么把单独的样式写在连写的里面

question：需要在网页中展示一张图片的效果？

• 方法一：直接写上img标签即可；img标签是一个标签，不设置宽高默认会以原尺寸显示
• 方法二：div标签 + 背景图片；需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

元素显示模式

元素显示模式	特点	代表性标签
块级元素	1. 独占一行（一行只能显示一个） 2. 宽度默认是父元素的宽度，高度默认由内容撑开 3. 可以设置宽高	div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
行内元素	1. 一行可以显示多个 2. 宽度和高度默认由内容撑开 3. 不可以设置宽高	a、span 、b、u、i、s、strong、ins、em、del……
行内块元素	1. 一行可以显示多个 2. 可以设置宽高	input、textarea、button、select…… 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

• 元素转换模式

属性	效果	使用频率
display: block	转换成块级元素	较多
display :in1ine-block	转换成行内块元素	较多
display :inline	转换成行内元素	极少

---

• 注意点

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……

• ➢ 但是：p标签中不要嵌套div、p、h等块级元素

2.a标签内部可以嵌套任意元素

• ➢ 但是：a标签不能嵌套a标签

css特性

css继承性

• 子元素有默认继承父元素样式的特点
• 常见的属性可以继承：color；font-style、font-weight、font-size、font-family；text-indent、text-align；line-height

---

继承的常见好处：一定程度上减少代码

1.可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

2.直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

---

注意

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

css层叠性

特点：

1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果