一、学习内容 css的复合选择器 后代选择器 概念:又叫做包含选择器,可以选择父元素里面所有复合条件的子元素 语法 元素1 元素2 {css样式} 元素1代表父元素,元素2代表子元素 元素1和元素2之间要用空格 隔开, 元素2可以是儿子也可以是孙子 元素1和元素2可以是任意的选择器 子选择器: 概念:只能选择某个父元素最近的一级子元素, 语法: 元素1>元素2{css的样式代码} 表示选择元素1里面最近的一级元素2 并集选择器 概念:可以选择多组标签,同时为他们定义相同样式,通常是用于集体声明 并集选择器是各组选择器通过英文的逗号链接 伪类选择器 伪类选择器是附加在其他的选择器之一的一种选择器,可以来添加特殊的效果 链接伪类选择器 因为伪类选择器比较多,链接伪类的使用,是最频繁的 :hover a:hover 选择鼠标悬浮在链接上 :link a:link 选择所有未被访问过的链接 :active a:active 选择所有链接,当鼠标按下链接时 :visited a:visited 选择所有已被访问过的链接 焦点伪类选择器 :focus 焦点伪类选择器用于选取获得焦点的元素,只有表单元素获取焦点的时候的 总结:伪类选择器和css来的选择器一样,可以附加在其他的选择器上 向选择器添加伪类选择器的时候,必须保证选择器支持这种 Css的元素显示模式 概念:就是元素的显示方式,以什么养的形式来显示,h1标签自己占一行,span标签一行会有多个 块元素 常见的块元素 h1-h6 <p></p> <div></div> <ul></ul> <li></li>等等,<div></div>是典型的块元素 特点:自己独占一行; 高度和宽度可以设置 宽度是默认是和父元素宽度保持一致的 块元素里面可以放行内元素也可以放块元素 注意点: 文字类的元素内不能使用块元素 比如p标签只能放文字,不要放其他的块元素,特别是<div>,因为会造成语义混乱情况 行内元素 常见的行内元素 <span></span> <strong></strong> <a></a> <i></i>等等 特点: 相邻的行内元素在一行上进行展示,一行可以显示多个 设置宽高无效 默认的宽度和高度是他里面内容的宽高 行内元素只能容纳文本或者其他的行内元素 注意点: 链接里面不要再套链接 如果a标签里面嵌套了块元素,那么就需要先将a标签转化为块元素才可以 行内块元素 Img,input 特点 相邻的元素在一行上进行显示,但是他们之间有空白间隙(行内元素的特点) 高度、宽度都是可以设置的(块元素) 元素的显示模式转换 转化为块元素: display:block; 转化为行内元素:display:inline; 转化为行内块元素:display:inline-block; 二、遇到的问题 无 三、解决方案 无
|