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

伪类选择器与浮动（学习笔记）

作者：AllinToyou | 2024-03-19 14:52:40

赞

踩

伪类选择器与浮动（学习笔记）

一、伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

>:link “链接”：超链接点击之前

>:visited “访问过的”：超链接被访问过之后

（↑只适用于超链接）

>:hover “悬停”：鼠标放到标签上的时候

>:active “激活”： 鼠标点击标签，但是不松手时。

（↑适用于所有元素）

  1. /*让超链接点击之前是红色*/
  2. a:link{
  3.     color:red;
  4. }
  5.  
  6. /*让超链接点击之后是橘色*/
  7. a:visited{
  8.     color:orange;
  9. }
  10.  
  11. /*鼠标悬停，放到标签上的时候是绿色*/
  12. a:hover{
  13.     color:green;
  14. }
  15.  
  16. /*鼠标点击链接，但是不松手的时候是黑色*/
  17. a:active{
  18.     color:black;
  19. }
  20. ```

​   记住，在css中，这四种状态必须按照固定的顺序写：

​   a:link 、a:visited 、a:hover 、a:active

​   如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

二、css3新增伪类选择器

2.1:first-child 选择器

​   :first-child 选择器匹配其父元素中的第一个子元素。

  1. /* 列表中的第一个 <li>元素选择的样式： */
  2.  
  3. li:first-child{
  4.  
  5.     background:yellow;
  6.  
  7. }



 2.2:last-child 选择器

​   :last-child选择器用来匹配父元素中最后一个子元素。

  1. /* 指定最后一个p元素的背景色： */
  2.  
  3. p:last-child{
  4.  
  5.     background:#ff0000;
  6.  
  7. }

2.3:nth-child ()选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

  1. p:nth-child(odd){
  2.  
  3.     background:#ff0000;
  4.  
  5. }
  6.  
  7.  
  8.  
  9. p:nth-child(even){
  10.  
  11.     background:#0000ff;
  12.  
  13. }
  14.  
  15.  
  16.  
  17. p:nth-child(3){
  18.  
  19.     background:#00ff00;
  20.  
  21. }
  22.  
  23.  
  24.  
  25. p:nth-child(4n){
  26.  
  27.     background:#00ffff;
  28.  
  29. }

2.4:first-of-type 选择器

​   :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。

​   提示: 和 :nth-of-type(1) 是一个意思。

  1. /* 选择的 p 元素是其父元素的第一个 p 元素： */
  2.  
  3. p:first-of-type {
  4.  
  5.     background:#ff0000;
  6.  
  7. }

2.5:last-of-type 选择器

​   :last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。

​   提示: 和:nth-last-of-type(1)是一个意思。

  1. /* 指定其父级的最后一个p元素的背景色： */
  2.  
  3. p:last-of-type{
  4.  
  5.     background:#ff0000;
  6.  
  7. }

2.6:nth-last-child() 选择器

​   :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

​   n可以是一个数字，一个关键字，或者一个公式。

  1.  
  2. /* 指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色： */
  3.  
  4. p:nth-last-child(2) {
  5.  
  6.      background:#ff0000;
  7.  
  8. }

2.7:nth-of-type() 选择器

​   :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

​   n可以是一个数字，一个关键字，或者一个公式。

  1. /* 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色： */
  2.  
  3. p:nth-of-type(2){
  4.  
  5.     background:#ff0000;
  6.  
  7. }
  8.

2.8:not() 选择器

​   :not(selector) 选择器匹配每个元素不是指定的元素/选择器。

  1. /* 为每个并非<p>元素的元素设置背景颜色： */
  2.  
  3. :not(p){
  4.  
  5.     background:#ff0000;
  6.  
  7. }

三、浮动 

3.1.概念

浮动视定了元素往娜个方问浮动（只有左两个方问）。

任何元素都可以浮动，元素浮动后转换为块级元素。

3.2作用

1)图片坏绕

2)布局（块级元素水平显示）

 

3.3原理

1)浮动元素脱离文档流（元素在页面不占据位置）

2)浮动元素碰到包含框或者浮动元素的边框会停止（浮动元素不会重叠）

3)元素只有左右浮动

4)所有元素都可以浮动，浮动后转换为块级元素

5)块级元素默认宽度变为由内容撑开

6)开启BFC格式，块级格式上下文，变为独立的一块，布局不受子元素和父元素的影响

fLoat.:Left|right/none：

3.4清除浮动影响的方法：

1)父元素加高度（高度已知）

2)父元素overfLow:hidden;(自动找高度）

3)受影响的元素加cLear:both;(元素回到正常的位置，父元素的高度没有找)

4)空div法（在浮动元素后加空div,<div cLass="cLear"></div>,cLear{cLear:both;})(空div回到正常位置，父元素高度找到，但是页面新增无语义的空元素) 

5)伪对象法

四、 元素定位  position

        4.1 作用

        定义元素在页面的位置

        4.2 属性值

        static  默认值  静态定位

        relative  相对定位

        fixed  固定定位

        sticky  粘性定位

        absolute  绝对定位

        4.3 relative  相对定位

        相对于自己原位置定位，定位后原位置保留

        配合left、right、top、bottom移动，当四个属性同时存在，left、top生效

        当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动

        当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动

  1.         .box1{
  2.             width: 200px;
  3.             height: 200px;
  4.             background-color: pink;
  5.             /* 相对定位，相对于自己原位置定位 */
  6.             position: relative;
  7.             /* 配合top、bottom、left、right移动 ，当四个属性同时存在，left和top生效*/
  8.             top: -50px;
  9.             /* left: 50px; */
  10.             right: 50px;
  11.         }
  12.         .box2{
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: plum;
  16.         }

 

        应用场景：

        1）配合绝对定位使用

        2）自己小范围移动

        4.4 fixed  固定定位

        相对于浏览器窗口定位，定位后原位置不保留(脱离文档流)

        配合left、right、top、bottom移动，当四个属性同时存在，left、top生效

        当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动

        当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         body {
  11.             height: 3000px;
  12.         }
  13.  
  14.         .box1 {
  15.             width: 50px;
  16.             height: 50px;
  17.             background-color: skyblue;
  18.             /* 元素固定定位，参照点浏览器窗口 */
  19.             position: fixed;
  20.             right: 20px;
  21.             bottom: 20px;
  22.         }
  23.  
  24.         .box2 {
  25.             width: 200px;
  26.             height: 200px;
  27.             background-color: pink;
  28.         }
  29.     </style>
  30. </head>
  31.  
  32. <body>
  33.     <div class="box1">返回页面顶部</div>
  34.     <div class="box2"></div>
  35. </body>
  36.  
  37. </html>

 

        应用场景：

        固定在页面某个位置，例如返回页面顶部等

        4.5 sticky  粘性定位

        相对于相对定位(参照点为自己的原位置)和固定位(参照点为浏览器窗口)的结合

        配合left、right、top、bottom移动，当四个属性同时存在，left、top生效

        默认相对定位，当到达临界点，变为固定定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body{
  10.             height: 3000px;
  11.         }
  12.         .header{
  13.             width: 100%;
  14.             height: 45px;
  15.             background-color: pink;
  16.         }
  17.         .nav{
  18.             width: 100%;
  19.             height: 75px;
  20.             background-color: paleturquoise;
  21.             /* 相对定位和固定定位的结合 */
  22.             position: sticky;
  23.             /* 默认是相对定位，相对于自己原位置移动0 0，后面变为固定定位，相对于浏览器窗口0 0 */
  24.             top: 0;
  25.             left: 0;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="header"></div>
  31.     <div class="nav"></div>
  32. </body>
  33. </html>

 

        4.6 absolute 绝对定位

        相对于static以外的第一个父元素定位，如果父元素没有定位，逐级往上找，最后相对于初级包含框定位(视口)

        如果需要相对于body定位，body{position:relative;}，绝对定位后原位置不保留(脱离文档流)

        配合left、right、top、bottom移动，当四个属性同时存在，left、top生效

        当参照点为左上(left/top)：取正值，往右下移动；取负值，往左上移动

        当参照点为右下(right/bottom)：取正值，往左上移动；取负值，往右下移动

        应用场景：

        形成独立的一层

​       

 

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

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

  

闽ICP备14008679号