CSS补充（下），弹性布局（上）

高级选择器

1.兄弟选择器

2.同时满足

css 复制代码

	div.bg{
      background-color: red;
    }
    p.bg{
      background-color: green;
    }
    spam.bg{
      background-color: blue;
    }

注：选择器中间没有空格，有明确标识的选择器写在后面

3.各种伪类的应用

3.1作为第几个子元素

选择器:nth-child(n){

...

}

作为第n个子元素，切选择器能匹配到

css 复制代码

        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）具有属性

css 复制代码

        input[type="text"]{
            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 交叉轴居中