CSS核心
一.复杂选择器
- 兄弟选择器
兄弟元素—>具备相同父级元素的平级元素之间,称为兄弟元素。所有的兄弟选择器,只往后找,不能往前找(只能找弟弟,不能找哥哥)- 相邻兄弟选择器
选择器1+选择器2{}
要求匹配选择器2紧紧挨着选择器1,修改选择器2的样式
即:确认一个哥哥,找到一个紧紧挨着符合条件弟弟,然后修改弟弟 - 通用兄弟选择器
选择器1~选择器2{}
获取选择器1后面,所有选择器2,然后修改这些选择器2
即:确认一个哥哥,找到符合条件的所有弟弟
使用场合
经常用于,一组元素,第一个元素不要,后面元素都匹配的样式编写
- 相邻兄弟选择器
- 属性(
attribute
)选择器–不是为写样式服务的,为dom服务。
[attr]{}
:匹配页面中,具有attr属性的元素
elem[attr]{ }
:匹配页面中,具有attr属性的elem元素
[attr=value]{}
:匹配页面中,具有attr属性并且属性值为value的元素
elem[attr=value]{}
[attr1][attr2]....{}
同时具备attr1,attr2…属性的元素
elem[attr1][attr2]....{}
:同时具备attr1,attr2…属性的elem元素
elem[attr1=value1][attr2=value2]....{}
举例如下:
如何为dom服务(为查找自定义属性)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> [id]{color: red;} p[class]{color: green;} [title="xiaohong"]{color: blue;} b[title]{color: pink;} [title][style]{color: purple;} div[class]{color: black;} h1[title="lala"]{color: yellow;} </style> </head> <body> <p id="p1">老大</p> <p class="c">老二</p> <span title="xiaohong">老三</span> <b title="lala">老四</b> <p title="" style="">老五</p> <div class="c">老六</div> <h1 title="lala">老幺</h1> </body> </html>
使用属性选择器进行模糊查询
[attr^=value]{}
: 匹配attr的值,以value开头的元素
[attr$=value]{}
: 匹配attr的值,以value结尾的元素
[attr*=value]{}
: 匹配attr的值,含有value的元素
[attr~=value]{}
: 匹配attr的值,含有value这个单独单词(即只有该value或value前后有空格成为单独一个单词)的元素 - 伪类选择器
:link :visited :hover :active :focus
es6规定,伪类选择器要是用::开头。但是es6之前就定义好的伪类,还是用单:- 目标伪类
匹配被激活的锚点,要应用的样式
:target{}
- 结构伪类
通过结构关系,匹配元素- :first-child{}
选择器用于选取属于其父元素的首个子元素的指定选择器。 - :last-child{}
找到当前元素父元素的最后一个儿子 - :nth-child(n){} 找到其父元素的第n个儿子,n从1开始
注意:此处的儿子必须与当前元素相同,即p:fist-child意为:查找p标签所在父元素下第一个p标签
练习03_ex.html
4*4的表格, 400*400px
通过结构伪类设置如下样式
第一行背景色为#0ff;
最后一行背景色为#ff0
第三行第二列背景色为#f00<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p:first-child i{color: red;} table{ width: 400px;height: 400; } tr:first-child{background-color: #0ff;} tr:last-child{background-color: #ff0;} tr:nth-child(3) td:nth-child(2){background-color: #f00;} </style> </head> <body> <table> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td>222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td>333</td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td>444</td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> </body> </html>
- :first-child{}
- 否定伪类
符合条件的元素都不匹配
:not(selector){}
例:/* 选取不含href和tabindex属性的a标签*/ a:not(href):not([tabindex]){} /* 选取table中不是第三行且不选第2列的其他td设置背景颜色*/ tr:not(:nth-child(3)) td:not(:nth-child(2)){background-color: #f0f;}
- 空元素
`:empty{}: 匹配内部没有元素的元素
没有元素:不能有后代元素,也不能有任何文本(空格和回车都不能有)/* 选取内部是空的p元素*/ p:empty{ width: 100px;height: 100px; background-color: #ff0; }
- 独生子女
属于其父元素的唯一子元素
:only-child{}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 选取属于该元素父元素下的唯一子元素的a */ a:only-child{ background-color: #0ff; } </style> </head> <body> <p> <a href="">222222222</a> <a href="">222222222</a> <a href="">222222222</a> <a href="">222222222</a> </p> <p> <!-- 该行变色 --> <a href="">1111111111111</a> </p> <p></p> </body> </html>
- 目标伪类
- 伪元素选择器(建议使用双冒号)
- 匹配第一个字符
:first-letter
或者::first-letter{}
- 匹配第一行文本
:first-line
或::first-line
当第一行和首字符冲突时,首字符优先级更高 - 匹配用户选中文本
::selection
只有双冒号
和首字符冲突时,首字符优先级更高。只能设置背景色和文本颜色。
- 匹配第一个字符
- 内容生成
使用css
命令,添加html
元素,叫做内容生成- 使用
:after
或者::after
给元素添加一个儿子
这个儿子默认是行内元素
使用content添加内容(文本或者url(img)) - 使用:before或者::before给元素添加一个儿子
这个儿子默认是行内元素
使用content添加内容(文本或者url(img))
- 使用
- 内容生成解决的问题
- 外边距溢出
/*等价在parent元素的最开始设置一个空table*/ #parent::before{ content: ""; display: table; }
- 高度坍塌
/* 等价在parent元素的最后加一个设置了clear:both的div */ #parent::after{ content: ""; display: block; clear: both; }
- 外边距溢出
二.弹性布局(重点)
- 什么是弹性布局
主要解决某个元素中,子元素(仅仅是子元素不是后代元素)的布局方式
为布局提供非常大的灵活性 - 弹性布局的相关概念
- 容器
要发生弹性布局的子元素的父元素叫做容器
即:定义了display:flex;
的元素 - 项目
要发生弹性布局的子元素们叫做项目
即:定义了display: flex
的元素的儿子们 - 主轴(4条)–x轴正负方向,y轴正负方向
项目们的排列方向,称之为主轴
项目们在主轴上的排列顺序,称为主轴的起点和终点
例:x轴正方向称为:主轴方向x轴,主轴起点-左侧,主轴重点-右侧 - 交叉轴(2条)–x轴正方向,y轴负方向
永远与主轴垂直的方向
项目们在交叉轴上的排列,称为交叉轴的起点和终点
以图中3个元素为例:3个子元素做弹性布局,主轴方向x轴,主轴起点-左侧,交叉轴y轴,在交叉轴的终点对齐
- 容器
- 语法
设置弹性容器
display:
取值:
flex;
把块级变为弹性容器
inline-flex;
将行内元素变为弹性容器
注意:- 当一个元素设置为容器之后,这个容器的
text-align
,vertical-align
失效,项目没失效 - 当元素变为弹性项目时(即父元素设置了display:flex),这个弹性项目float,clear失效
- 当一个元素设置为容器之后,这个容器的
- 容器的样式属性
- 设置主轴的方向
flex-direction:
取值:
row
默认值,主轴为x,主轴起点在左侧
row-reverse
主轴为x,主轴起点在右
column
主轴为y,主轴起点在顶部
column-reverse
主轴为y,主轴起点在底部 - 设置项目换行
当容器在主轴方向,空间不够时,用来设置项目是否换行
flex-wrap:
取值:
no-wrap;
: 默认值,不换行(项目压缩)
wrap;
:换行
wrap-reverse;
:反转换行 - 上面两个属性的简写方式
flex-flow: 主轴方向 换行;
- 定义项目在主轴上对齐方式
justify-content:
flex-start;
: 默认值,主轴起点对齐
center;
: 主轴的中间对齐
flex-end;
: 主轴终点对齐
space-around;
: 每个项目左右外边距相同 (两端有空间)
space-between;
: 每个项目之间间距相同,两端对齐(两端没有空间)
- 交叉轴对齐方式
align-items:
取值:
flex-start
交叉轴起点
center
中间
flex-end
交叉轴终点
baseline
每个项目的文本,基线对齐(很少用)
stretch
前提,是项目(不是容器)在交叉轴方向不写尺寸,项目充满交叉轴
- 设置主轴的方向
- 项目的样式属性
只能设置在一个项目上,不影响其他项目-
单独设置一个项目交叉轴对齐方式
align-self:
取值:
flex-start
交叉轴起点
center
中间
flex-end
交叉轴终点
baseline
每个项目的文本,基线对齐(很少用)
stretch
前提,是项目(不是容器)在交叉轴方向不写尺寸,项目充满交叉轴
auto
使用容器align-items
定义的值 -
设置项目在主轴的排列顺序
order:
取值为无单位数字,默认值为0。值越小,离主轴起点越近! -
项目缩小
当主轴空间不够时,项目是否缩小,怎么缩小
flex-shrink:取值为不带单位的数字
默认值:1;
取值规则,子元素总溢出宽度,根据flex-shrink
取值,按比例*总溢出宽度,分配给各个项目做缩小(减法)。
举例:
为父元素命名为div0,1-5五个子元素分别命名为div1、div2、…、div5。
父元素需要设定:display:flex,width:500px
所有子元素需要设定:
flex-basis:120px; 即不发生收缩时子元素原本的宽度
以上为先决条件。子元素宽度之和与父元素宽度的差值:
120*5-500=100px
这时通过设定子元素的flex-shrink属性来决定100px总缩减量如何分配给5个子元素。
预设:前三个div设置flex-shrink: 1;
后两个div设置flex-shrink: 2;div1占总收缩比例的1/7,所以div1需要被移除的溢出量为
100*(1/7)≈14px
则,最后div1的实际宽度为
120-14=106px
-
项目放大
当主轴空间过大,项目是否放大,怎么放大
flex-grow:取值为不带单位的数字
默认值:0;
取值规则,多出的空间,按照取值,分配给各个项目进行放大(相加)
-