day14笔记

day14笔记

一、CSS3介绍

/* border-radius: 50%; */ /* border-radius: 10px 20px 30px 20px; */ /* border-radius: 10px 20px 30px; */ /*值1表示水平 值2表示垂直 值3表示模糊程度 值4表示阴影颜色 值5表示内阴影inset*/ /*值1表示水平 值2表示垂直 值3表示模糊程度 值4表示阴影颜色*/ text-shadow: 5px 5px 5px red, 10px 10px 5px greenyellow, 15px 15px 5px pink; css层叠样式表 1、css2.1版本常用 2、css3是css第三个版本，并不是一个新的语言 3、css3和之前的版本有什么区别 + 在原来的基础上新增一些好用的属性和选择器 + 圆角、阴影、动画、2D、3D、过渡、渐变、背景等等 + 布局方式，弹性盒布局flexbox，媒体查询（响应式） + 新增了几个单位rem、vw等等

二、阴影属性

/* box-shadow: 0px 3px 10px black; */ /*需要参与过渡的属性 all表示所有的属性*/ /* transition-property:box-shadow, margin-top, background-color; */ /* transition-property: all; */ /*过渡时间*/ /* transition-duration: .5s; */ word-break: break-all; -英文句子会默认换行，如果单词与单词之间没有空格那就不会换行

三、属性选择器

/*通过属性选取元素*/ /* input[value]{ border: 1px solid red; } */

/*通过属性的属性值选取元素 最常用的*/
/* input[type="text"]{
	border: 1px solid orange;
}
input[type="search"]{
	border: 1px solid red;
} 
input[name="username"]{
	border: 1px solid red;
}*/

/*通过属性的属性值的开头内容选取元素*/
/* a[href^="h"]{
	color: red;
} */

/*通过属性的属性值的结尾内容选取元素*/
/* a[href$="m"]{
	color: orange;
} */

/*通过属性的属性值的任意内容选取元素*/
a[href*="S"]{
	color: hotpink;
}
属性选择器：减少对类名和id名称的依赖，可以通过标记自身的html属性选取元素
知识点：在程序语言里面^表示开头，$表示结尾，*表示所有的
空链接，不会返回顶部，可以执行执行代码

四、序列选择器

选中同级别的第1个标记

选中同级别的第2个标记

选中同级别的第3个标记

选中同级别的第4个标记

选中同级别的第5个标记

选中同级别的第6个标记

选中同级别的第7个标记

选中同级别的第8个标记

五、UI元素状态伪类

六、其他选择器补充

七、层次选择器

层级（层次）选择器： + 包含选择器（后代）作用：只要是它的里面的元素样式能继承的都会起作用 + 子选择器 作用：样式只对子元素起作用，其他的后代元素不起作用 + 相邻兄弟选择器 作用：它只对它后面的第一个元素起作用

css继承问题：
+ 儿子继承父亲的一些东西（固定资产、存款、股票、基金等等）
+ 子元素或者后代元素会继承父元素的一些属性

注意点：
+ 超链接不能继承父元素的文本颜色
+ 当容器设置了边框，边框没有设置颜色时，当咱们设置了文本颜色属性，边框会以文本的颜色为颜色
+ 当子元素没有设置宽度的时候，它的宽度会跟随容器，这是块级元素特性决定的

八、下拉菜单

• 精神小伙1
• 精神小伙2
• 精神小伙3
  • 新一代
  • 农民工
  • 被平均
• 精神小伙4
• 精神小伙5
• 精神小伙6
• 精神小伙7
• 精神小伙8

九、层级选择器

/*相邻兄弟选择器，只能选中它后面的那个标记，不能其他类型的标记给隔开*/ /* div+p{ background-color: yellow; } */

/*通用兄弟选择器，可以选中它后面的所有的标记，可以被其他类型的标记隔开*/
			div~p{
				background-color: orange;
			}

十、浏览器私有属性前缀

浏览器私有前缀 + CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。因此每种内核的浏览器都只能识别带有自身私有前缀 的CSS3属性 + 一个新的属性在刚刚出来时，或者在咱们测试（尝鲜）使用的时候它还没有成为标准的一部分，没有成为标准的一部分浏览器 它是不支持的 + 为了这个属性发展和使用，制定属性的代表方和各个浏览器之间制定了一个规则，虽然没有成为标准根据这个规则让咱们先使用 + 各个浏览器对应的提出了一个私有前缀的概念，你要在我的浏览器里面执行这个属性那你把我们的前缀加上，浏览器就知道你是什么情况

浏览器私有前缀有哪些
+ -webkit- 谷歌
+ -moz- 火狐
+ -ms- IE
+ -o- 欧朋