vs2013网站开发,做二维码推送网站,安卓市场下载官网,正中路桥建设发展有限公司网站高级选择器
1.兄弟选择器
2.同时满足 div.bg{background-color: red;}p.bg{background-color: green;}spam.bg{background-color: blue;}注#xff1a;选择器中间没有空格#xff0c;有明确标识的选择器写在后面
3.各种伪类的应用
3.1作为第几个子元素
选择器:nth-child…高级选择器
1.兄弟选择器
2.同时满足 div.bg{background-color: red;}p.bg{background-color: green;}spam.bg{background-color: blue;}注选择器中间没有空格有明确标识的选择器写在后面
3.各种伪类的应用
3.1作为第几个子元素
选择器:nth-child(n){ … } 作为第n个子元素切选择器能匹配到 span:nth-child(1){background-color: red;}选择器:first-child/选择器:last-child 作为第一个/最后一个子元素且选择器能匹配到的元素 选择器:only-child 作为唯一一个子元素且选择器能匹配到元素
4.内容相关
4.1 空标签
选择器:empty{} 没有任何内容空格都不行且选择器能匹配到的元素
4.2 筛选子元素的选择器
选择器a:has(选择器b) 匹配元素满足两个条件 1能被选择器匹配到 2后代元素能被选择器b匹配到
5.属性相关
选择器[属性属性值] 匹配元素满足两个条件 1能被选择器匹配到 2属性属性值 选择器[属性值] 匹配元素满足两个条件 1能被选择器匹配到 2具有属性 input[typetext]{width: 200px;height: 50px;}input[checked]{width: 200px;height: 50px;}弹性布局
display: flex 开启弹性布局区 注受影响的是子元素 子元素都默认向左浮动且完成了清除浮动 开启弹性布局后给父元素设置的属性
1.主轴排列方式
flex-direcrion: 默认值 row 从左向右排列 可选值 row-reverse 从右向左排列 column 从上向下排列 column-reverse 从下向上排列
2.主轴上子元素的分布方式
justify-content 默认值 flex-start 主轴开始方向对齐
案例中从左向右排列默认就是左对齐 可选值 flex-end 主轴结束方向对齐
案例中从左向右排列此值就是右对齐 注不会改变排列方向 center 主轴居中 案例中从左向右排列此值就是右对齐 space-between 主轴两端对齐 注如果子元素在父元素中左右不留空隙就是两端对齐 space-evenly 间距平均分布 注如果子元素在父元素中左右有空隙每个间距都相等就是间距平均分布。 space-around 外边距平均分布 注如果子元素在父元素中左右有空隙子元素到父元素边框的距离和子元素之间的距离不等。
3.在主轴flex-direction上确定后与主轴垂直方向就是交叉轴
当从左向右或者从右向左排列时主轴就是水平方向则交叉轴就是竖直方向。 当从左向右或者从上向下排列时主轴就是竖直方向则交叉轴就是水平方向。 子元素在交叉轴上的对齐方式 注想要这个属性看到效果则父元素在交叉轴方向的长度要大于系元素。 align-items: 默认值 flex-start 开始方向对齐水平就是左对齐竖直就是顶对齐 可选值flex-end 交叉轴结束方向对齐 center 交叉轴居中
