devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css笔记四-结构伪类选择器、伪元素、浮动_css第4个li,怎么用伪元素来表示

作者：IT小白 | 2024-08-22 02:45:07

赞

踩

css第4个li,怎么用伪元素来表示

一、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

1、作用与优势：

作用：根据元素在HTML中的结构关系查找元素；

优势：减少对于HTML中类的依赖，有利于保持代码整洁；

场景：常用于查找某父级选择器中的子元素；

2、结构伪类选择器——查找单个

  1. <style>
  2.     /* 1. 找到第一个子元素并且为 li 的标签  */
  3.     li:first-child {
  4.         background-color: blue;
  5.     }
  6.  
  7.     /* 2. 找到最后一个子元素并且为 li 的标签 */
  8.     li:last-child{
  9.         background-color: red;
  10.     }
  11.  
  12.     /* 3. 找到第三个子元素并且为 li 的标签 */
  13.  
  14.     li:nth-child(3){
  15.         background-color: green;
  16.     }
  17.  
  18.     /* 4. 找到倒数第三个子元素并且为 li 的标签 */
  19.     li:nth-last-child(3){
  20.         background-color: pink;
  21.     }
  22.  
  23. </style>
  24. <body>
  25.     <ul>
  26.         <li>我是第1个li</li>
  27.         <li>我是第2个li</li>
  28.         <li>我是第3个li</li>
  29.         <li>我是第4个li</li>
  30.         <li>我是第5个li</li>
  31.         <li>我是第6个li</li>
  32.         <li>我是第7个li</li>
  33.         <li>我是第8个li</li>
  34.         <li>我是第9个li</li>
  35.         <li>我是第10个li</li>
  36.     </ul>
  37. </body>

 3、查找多个

  1.    /* 5. 偶数 li */
  2.     li:nth-child(2n){
  3.         background-color: orange;
  4.     }
  5.     /* 6。奇数 li */
  6.     li:nth-child(2n+1){
  7.         background-color: purple;
  8.     }

 

  1.  /* 7. 找到前 5 个 */
  2.  li:nth-child(-n+5){
  3.      background-color: skyblue;
  4.  }
  5.  
  6.  /* 8. 找到从第 5 个往后 */
  7. li:nth-child(n+5){
  8.     background-color: yellow;
  9. }

 4、结构伪类选择器的易错点

需求：将 li 标签中第一个 a 标签变为红色字体

错误写法以及正确写法如下：

  1. /* 错误写法 */
  2. li a:first-child{
  3.     color: red;
  4. }
  5.  
  6. /* 正确写法 */
  7.  
  8. li:first-child a{
  9.     color: red;
  10. }

5、nth-of-type

E:nth-of-type(n){} : 只在父元素同类型（E）子元素范围中，匹配第n个；

区别：

：nth-child——直接在所有孩子中数个数；

：nth-of-type——先通过该类型找到符合的一堆子元素，然后在这一堆子元素中找个数；

二、伪元素

目标：能够使用伪元素在网页中创建内容；

伪元素：一般页面中的非主体元素内容都可以使用伪元素；

区别：

元素：HTML设置的标签；

伪元素：由CSS模拟出的标签效果；

种类：

伪元素作用
：：before在父元素内容的最前添加一个伪元素
：：after在父元素内容的最后添加一个伪元素

注意点：必须设置content属性才能生效；

        伪元素默认是行内元素；

  1. <style>
  2.     .father{
  3.         width: 300px;
  4.         height: 300px;
  5.         background-color: skyblue;
  6.     }
  7.     .father::before{
  8.         content: '我是伪元素';
  9.         display: block;
  10.         width: 100px;
  11.         height: 100px;
  12.         background-color: tomato;
  13.     }
  14.     .father::after{
  15.         content: '我是伪元素';
  16.         display: block;
  17.         width: 100px;
  18.         height: 100px;
  19.         background-color: tomato;
  20.     }
  21.  
  22.  
  23. </style>
  24. <body>
  25.     <div class="father"></div>

 三、标准流

目标：能够认识标准流的到默认排布方式及其特点

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素；

常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行；

行内元素或行内块元素：从左往右，水平布局，空间不够自动折行；

四、浮动

1、浮动的作用

 2、浮动的代码

属性名：float

属性值：左浮动——  left   /    右浮动——right

3、浮动的特点

1>浮动元素会脱离标准流（简称：脱标），在标准流中不占位置；

   相当于从地面飘到了空中；

2>浮动元素比标准流高半个级别，可以覆盖标准流中得元素；

3>浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动；

4>浮动元素会受到上面元素边界的影响；

5>浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高；

注意点：浮动的元素不能通过text-align：center 或者 margin：0 auto，让浮动元素本身水平居中。

4、浮动案例

  1. <style>
  2.     *{
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.    .header{
  7.        height: 40px;
  8.        background-color: #333;
  9.    }
  10.    .nav{
  11.        width: 1226px;
  12.        height: 100px;
  13.        background-color: #ffc0cb;
  14.        margin: 0 auto;
  15.    }
  16.    .banner{
  17.        width: 1226px;
  18.        height:460px;
  19.        background-color: yellow;
  20.        margin: 0 auto;
  21.    }
  22.    .left{
  23.        width: 234px;
  24.        height: 460px;
  25.        background-color: #ffa500;
  26.        float:left;
  27.    }
  28.    .right{
  29.        width: 992px;
  30.        height: 460px;
  31.        background-color:#87ceeb;
  32.        float: right;
  33.    }
  34.  
  35. </style>
  36. <body>
  37.     <div class="header"></div>
  38.     <div class="nav"></div>
  39.     <div class="banner">
  40.         <div class="left"></div>
  41.         <div class="right"></div>
  42.     </div>
  43. </body>

  1. <style>
  2.     *{
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.    .box{
  7.        width: 1226px;
  8.        height: 614px;
  9.        /* background-color: pink; */
  10.        margin: 50px auto;
  11.    }
  12.    .left{
  13.        width: 234px;
  14.        height:614px;
  15.        background-color: #800080;
  16.        float: left;
  17.    }
  18.    .right{
  19.        width: 978px;
  20.        height:614px;
  21.        /* background-color: yellow; */
  22.        float: right;
  23.    }
  24.    .item{
  25.        width:234px;
  26.        height: 300px;
  27.        background-color: #87ceeb;
  28.        float:left;
  29.        margin-right: 14px;
  30.        margin-bottom: 14px;
  31.    }
  32.    .item:nth-child(4n){
  33.        background-color: red;
  34.        margin-right: 0px;
  35.        margin-bottom: 0px;
  36.    }
  37.    .item:nth-child(n+5){
  38.        margin-bottom: 0px;
  39.    }
  40.  
  41. </style>
  42. <body>
  43.     <div class="box">
  44.         <div class="left"></div>
  45.         <div class="right">
  46.             <div class="item"></div>
  47.             <div class="item"></div>
  48.             <div class="item"></div>
  49.             <div class="item"></div>
  50.             <div class="item"></div>
  51.             <div class="item"></div>
  52.             <div class="item"></div>
  53.             <div class="item"></div>
  54.         </div>
  55.     </div>    
  56. </body>

书写网页导航步骤：

1.清除默认的margin和padding；

2.找到ul，去除小圆点；

3.找到标签，设置浮动让li在一行中显示；

4.找到 a 标签，设置宽高——a标签默认是行内元素，不能直接设置宽高，方法如下：

        一、给a标签设置display：inline-block；

        二、给a标签设置display：block；

        三、给a标签设置float：left;

  1. <style>
  2.     *{
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.     ul{
  7.         list-style: none;
  8.     }
  9.     li{
  10.         float: left;
  11.     }
  12.     ul li a{
  13.         width:80px;
  14.         height: 50px;
  15.         background-color: pink;
  16.         display: inline-block;
  17.         text-decoration: none;
  18.         line-height: 50px;
  19.         text-align: center;
  20.         font-size: 16px;
  21.         color: white;
  22.     }
  23.     ul li a:hover{
  24.         background-color: #008000;
  25.     }
  26. </style>
  27. <body>
  28.     <ul>
  29.         <li><a href="#">新闻1</a></li>
  30.         <li><a href="#">新闻2</a></li>
  31.         <li><a href="#">新闻3</a></li>
  32.         <li><a href="#">新闻4</a></li>
  33.         <li><a href="#">新闻5</a></li>
  34.         <li><a href="#">新闻6</a></li>
  35.         <li><a href="#">新闻7</a></li>
  36.         <li><a href="#">新闻8</a></li>
  37.     </ul>
  38. </body>

5、清除浮动

5.1介绍

含义：清除浮动带来的影响，

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素；

原因：子元素浮动后脱标——不占位置；

目的：需要父元素有高度，从而不影响其他网页元素的布局；

5.2清除浮动的方法

1> 直接给父元素设置高度

特点：简单粗暴，方便；

缺点：有些布局中不能固定父元素高度，如：新闻列表。京东推荐模块。

2> 额外标签法

操作：在父元素内容的最后添加一个块级元素；给添加的块级元素设置clear：both

特点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂；

3> 单伪元素清除法

操作：用伪元素代替了额外标签

基本写法：

  1.     .clearfix::after{
  2.         content: '';
  3.         display: block;
  4.         clear: both;
  5.     }

补充写法：

  1.     .clearfix::after{
  2.         content: '';
  3.         display: block;
  4.         clear: both;
  5.         /*    补充代码，在网页中看不到伪元素  */
  6.         height: 0;
  7.         visibility: hidden;   //把当前元素隐藏起来，网页看不到
  8.     }

特点：项目中使用，直接给标签中加类即可清除浮动；

4> 双伪元素清除法

  1.     .clearfix::before,
  2.     .clearfix::after{
  3.         content: '';
  4.         display: table;
  5.     }
  6.     .clearfix::after{
  7.         clear: both;
  8.     }

特点：项目中使用，直接给标签加类即可清除浮动

5> 给父元素设置 overflow: hidden;

操作：直接给父元素设置 overflow：hidden

特点：方便；

6、BFC（块格式化上下文）介绍

块格式化上下文（Block Formatting Context）:BFC

        web页面的可视css渲染的一部分，是块盒子布局过程发生的区域，也是浮动元素与其他元素交互的区域；

创建BFC的方法：

1> html 标签是BFC盒子；

2> 浮动元素是BFC盒子；

3> 行内块元素是BFC盒子；

4> overflow属性取值只要不为visible。如：auto、hidden....

5> .......

BFC盒子常见特点：

1> BFC盒子会默认包裹住内部子元素（标准流、浮动）——应用：清除浮动；

2> BFC盒子本身与子元素之间不存在margin的塌陷现象——应用：解决margin的塌陷；

3> ......

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/1014436
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号