|
一、今日学习内容css的复合选择器 复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的 优点：复合选择器可以更加准确、高效地选择目标元素 常用的复合选择器 后代选择器 后代选择器是可以选择父元素里面的子元素，外层标签写前面，内层标签写后面，中间用空格隔开 语法：元素1 元素2{样式声明} 注意 元素1是父级元素，元素2为子级元素 元素2可以是儿子也可以是孙子，只要是元素1的后代就行 元素1和元素2可以是任意的基础选择器 子选择器 子选择器只能选择作为某元素最近的一级子元素，简单理解就是亲儿子选择器 语法：元素1>元素2{样式声明} 注意 元素1和元素2之间要用>隔开 元素2必须是元素1的亲儿子，孙子重孙子等都不行 并集选择器 子选择器可以选择多组标签同时为他们指定相同的样式，通常用于集体声明 语法：元素，元素2，元素3{样式声明} 注意 并集选择器中每一组选择器之间用逗号隔开 每一组选择器可以是任意类型的选择器，基础选择器、复合选择器都可以 伪类选择器 ① 链接伪类选择器 选择器 ：hover——鼠标悬浮于链接上显示的样式 ：link——未被访问的链接样式 ：active——鼠标点击链接时的样式 ：visited——链接被访问之后的样式 注意 四个选择器都使用时常用的顺序（lvha） 如果想给其他属性添加伪类，这个选择器必须要有伪类的状态，否则不可以使用，实际工作中hover类使用的最多 ② 焦点伪类选择器 用focus来实现焦点元素的样式设置 语法： input:focus{样式声明} 一般焦点选择器都是和input标签来联合使用的，因为input标签具有聚焦的状态 css的元素显示模式css的元素显示模式（即元素在网页中的显示状态，如：h1标签自己独占一行，span标签一行可以显示多个，div标签可以自己独占一行。 html元素显示模式分类 块元素 特点 自己独占一行 本身也可以是容器或者盒子，里面可以放其他的行内或者块级元素 宽和高都是可以设置的，内外边距也是可以设置的 常见的块元素:h1-h6、div、p、ul、ol、li等标签，其中div是最典型的块级元素 注意：文字类的元素不能使用块级元素（如p标签里不要放div标签） 行内元素 特点 相邻的行内元素会在同一行显示 宽高设置都是无效的 默认宽高是其本身内容的宽高 行内元素只能容纳文本或者其他行内元素，如span里不能放div标签 常见行内元素：a、strong、em、ins、span等 注意 链接里不可以再放链接 如果a标签里要放一个块级元素，要将a标签的显示模式转化为块级元素更为安全 行内块元素 特点 相邻的行内块元素在一行上显示，并且有空白缝隙（行内元素特点） 默认宽度是它本身内容的宽度（行内元素的特点） 宽度和高度可以进行设置（块级元素的特点） 常见的行内块元素：input、img、td等 元素显示模块的转换 转化为块级元素——display:block 转化为行内元素——display:inline 转化为行内块元素——display:inline-block css的背景属性背景颜色 background-color 属性值 颜色名 十六进制 rgb(0,0,0) 背景图片 background-image 属性值：url(图片路径) 背景平铺 background-repeat 属性值 repeat :代表背景图片在横向和纵向都平铺，为默认值 no-repeat:代表背景图片不平铺 repeat-x:代表背景图片在横向上平铺 repeat-y:代表背景图片在纵向上平铺 背景图片定位 background-position 属性值 方位名词（left right center top bottom ）方位名词自带定位属性，无先后顺序，只写一个方位名词时另一个默认为center 精确的像素值单位：第一个值为x轴坐标，第二个为y轴坐标，只写一个时默认为对横轴进行设置纵轴默认居中，无法直接跳过横轴设置纵轴。想横轴居中纵轴为像素单位时可将横轴设置为center 背景图片的滚动 background-attachment 属性值 scroll:默认值，图片随屏幕进行滚动 fixed:图片不跟随屏幕进行滚动 背景的复合写法 background（无先后顺序之分） background-color background-image background-reprat background-attachment background-position 背景半透明 background:rgba（0,0,0,0.3） a是alpha的缩写，代表透明度，取值为0-1之间，习惯将0.3写为.3,0是可以省略的 背景半透明指盒子背景半透明，盒子里的内容不受影响 背景半透明是css3新增属性，只有ie9以上才会支持，但是实际开发中不太关注兼容性的写法，可以直接用 css的三大特性层叠性 相同选择器设置相同样式时，新样式会将旧样式覆盖掉 层叠性原则 样式冲突时，遵循就近原则，哪个样式距离结构近就用哪个样式 样式不冲突时不会层叠 继承性 在css中子标签会继承父级标签的某些属性，比如文本颜色字号等属性，简单理解为子承父业 可以被继承的属性：text- 、font-、line-以及color等属性 如果子级没有则用父级的属性，如果子级有则用子级自己的 优先级（权重） 如果选择器相同执行层叠性，如果选择器不同，则执行优先级 注意 权重是由四组数字组成的，但是不会有进位（类选择器的权重永远大于元素选择器） 如果使用复合选择器，就将复合选择器中的基础选择器的权重相加即可 继承的权重是0，父元素的样式权重再高对于子元素来说，继承下来的都是0
| 
