T-CSS核心-day01-复杂选择器、弹性布局

最新推荐文章于 2024-08-17 12:45:11 发布

奋斗胖

最新推荐文章于 2024-08-17 12:45:11 发布

阅读量224

点赞数

分类专栏： + CSS 文章标签： css css3

本文链接：https://blog.csdn.net/Mr_JinChang/article/details/105516864

版权

+ CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

CSS核心
一.复杂选择器
二.弹性布局（重点）

CSS核心

一.复杂选择器

兄弟选择器
兄弟元素—>具备相同父级元素的平级元素之间，称为兄弟元素。所有的兄弟选择器，只往后找，不能往前找（只能找弟弟，不能找哥哥）
1. 相邻兄弟选择器
  选择器1+选择器2{}
  要求匹配选择器2紧紧挨着选择器1，修改选择器2的样式
  即：确认一个哥哥，找到一个紧紧挨着符合条件弟弟，然后修改弟弟
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]....{}
举例如下：

<!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>

如何为dom服务（为查找自定义属性）

使用属性选择器进行模糊查询
[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>

否定伪类
符合条件的元素都不匹配
: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>

伪元素选择器（建议使用双冒号）
1. 匹配第一个字符
  :first-letter 或者 ::first-letter{}
2. 匹配第一行文本
  :first-line 或 ::first-line
  当第一行和首字符冲突时，首字符优先级更高
3. 匹配用户选中文本
  ::selection 只有双冒号
  和首字符冲突时，首字符优先级更高。只能设置背景色和文本颜色。
内容生成
使用css命令，添加html元素，叫做内容生成
1. 使用:after或者::after给元素添加一个儿子
  这个儿子默认是行内元素
  使用content添加内容（文本或者url(img)）
2. 使用:before或者：：before给元素添加一个儿子
  这个儿子默认是行内元素
  使用content添加内容（文本或者url(img)）

内容生成解决的问题

外边距溢出

    /*等价在parent元素的最开始设置一个空table*/
    #parent::before{
      content: "";
      display: table;
    }

高度坍塌

/* 等价在parent元素的最后加一个设置了clear:both的div */
#parent::after{
                content: "";
                display: block;
                clear: both;
            }

二.弹性布局（重点）

什么是弹性布局
主要解决某个元素中，子元素（仅仅是子元素不是后代元素）的布局方式
为布局提供非常大的灵活性
弹性布局的相关概念
1. 容器
  要发生弹性布局的子元素的父元素叫做容器
  即：定义了display：flex;的元素
2. 项目
  要发生弹性布局的子元素们叫做项目
  即：定义了display: flex的元素的儿子们
3. 主轴(4条)–x轴正负方向，y轴正负方向
  项目们的排列方向，称之为主轴
  项目们在主轴上的排列顺序，称为主轴的起点和终点
  例：x轴正方向称为：主轴方向x轴，主轴起点-左侧，主轴重点-右侧
4. 交叉轴(2条)–x轴正方向，y轴负方向
  永远与主轴垂直的方向
  项目们在交叉轴上的排列，称为交叉轴的起点和终点
  
  以图中3个元素为例：3个子元素做弹性布局，主轴方向x轴，主轴起点-左侧，交叉轴y轴，在交叉轴的终点对齐
语法
设置弹性容器
display：
取值：
flex; 把块级变为弹性容器
inline-flex; 将行内元素变为弹性容器
注意：
1. 当一个元素设置为容器之后，这个容器的text-align，vertical-align失效，项目没失效
2. 当元素变为弹性项目时（即父元素设置了display:flex），这个弹性项目float，clear失效
容器的样式属性
1. 设置主轴的方向
  flex-direction:
  取值：
  row 默认值，主轴为x，主轴起点在左侧
  row-reverse 主轴为x，主轴起点在右
  column 主轴为y，主轴起点在顶部
  column-reverse 主轴为y，主轴起点在底部
2. 设置项目换行
  当容器在主轴方向，空间不够时，用来设置项目是否换行
  flex-wrap:
  取值：
  no-wrap; ：默认值，不换行(项目压缩)
  wrap; ：换行
  wrap-reverse; ：反转换行
3. 上面两个属性的简写方式
  flex-flow: 主轴方向换行;
4. 定义项目在主轴上对齐方式
  justify-content:
  flex-start;：默认值，主轴起点对齐
  center;：主轴的中间对齐
  flex-end;：主轴终点对齐
  space-around;：每个项目左右外边距相同 (两端有空间)
  
  space-between;：每个项目之间间距相同，两端对齐(两端没有空间)
5. 交叉轴对齐方式
  align-items:
  取值：
  flex-start 交叉轴起点
  center 中间
  flex-end 交叉轴终点
  baseline 每个项目的文本，基线对齐（很少用）
  stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
项目的样式属性
只能设置在一个项目上，不影响其他项目
1. 单独设置一个项目交叉轴对齐方式
  align-self:
  取值：
  flex-start 交叉轴起点
  center 中间
  flex-end 交叉轴终点
  baseline 每个项目的文本，基线对齐（很少用）
  stretch 前提，是项目(不是容器)在交叉轴方向不写尺寸，项目充满交叉轴
  auto 使用容器align-items定义的值
2. 设置项目在主轴的排列顺序
  order:取值为无单位数字，默认值为0。值越小，离主轴起点越近！
3. 项目缩小
  当主轴空间不够时，项目是否缩小，怎么缩小
  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
4. 项目放大
  当主轴空间过大，项目是否放大，怎么放大
  flex-grow:取值为不带单位的数字
  默认值：0；
  取值规则，多出的空间，按照取值，分配给各个项目进行放大(相加)

奋斗胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
T-CSS核心-day01-复杂选择器、弹性布局

文章目录CSS核心一.复杂选择器二.弹性布局（重点）CSS核心一.复杂选择器兄弟选择器兄弟元素—>具备相同父级元素的平级元素之间，称为兄弟元素。所有的兄弟选择器，只往后找，不能往前找（只能找弟弟，不能找哥哥）相邻兄弟选择器选择器1+选择器2{}要求匹配选择器2紧紧挨着选择器1，修改选择器2的样式即：确认一个哥哥，找到一个紧紧挨着符合条件弟弟，然后修改弟弟通用兄弟选择器...
复制链接

扫一扫

专栏目录