广告
返回顶部
首页 > 资讯 > 前端开发 > html >CSS选择器的技巧
  • 829
分享到

CSS选择器的技巧

css 2022-10-19 09:10:35 829人浏览 八月长安
摘要

这篇文章主要讲解了“CSS选择器的技巧”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择器的技巧”吧!什么是:before和:after? 该如何使用

这篇文章主要讲解了“CSS选择器的技巧”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择器的技巧”吧!

什么是:before和:after? 该如何使用他们?

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。

下面我们先跑个简单的代码测试下效果:

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.   p:before{   

  4.   

  5.       content: "H"    

  6.   

  7.   }   

  8.   

  9.   p:after{   

  10.   

  11.       content: "d"    

  12.   

  13.   }   

  14.   

  15. </style>   

  16.   

  17. <p>ello Worl</p>   

 以上的代码将会在页面中展现的是"Hello World"。我们通过浏览器的"审查元素"看到的内容是:

XML/html Code复制内容到剪贴板

  1. <p>  

  2.   

  3.   ::before   

  4.   

  5.   "ello Worl"   

  6.   

  7.   ::after</p>  

  8.   

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是"H";而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是"d"。作为一只合格的程序猴子,捍卫"Hello World"的完整存在是必要的。


既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。

1.结合border写个对话框的样式

本兽将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.    .triangle{   

  4.   

  5.        width: 0;   

  6.   

  7.        height: 0;   

  8.   

  9.        border-left:50px solid red;   

  10.   

  11.        border-bottom:50px solid blue;   

  12.   

  13.        border-top:50px solid black;   

  14.   

  15.        border-right:50px solid purple    }   

  16.   

  17.  </style>   

  18.   

  19.  <div class="triangle"></div>   

以上代码将会在页面上展示一个正方形,左边是个红色的三角形,右边是紫色的三角形,上面是黑色的三角形,下面是蓝色的三角形。那么有人就会问,我们要的不是三角形么?野兽你画个正方形逗我呢?
我们对上面的样式做些修改:

CSS Code复制内容到剪贴板

  1. .triangle{   

  2.   

  3.     width: 0;   

  4.   

  5.     height: 0;   

  6.   

  7.     border:50px transparent solid;   

  8.   

  9.     border-top-color: black;    

  10.   

  11.       

  12.   

  13.     border-left-color: black;    

  14.   

  15.     border-right-color:black*/   

  16.   

  17. }    

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。

接下来我们加上:before:

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.   .test-div{   

  4.   

  5.       position: relative;    

  6.   

  7.       width:150px;   

  8.   

  9.       height:36px;   

  10.   

  11.       border-radius:5px;   

  12.   

  13.       border:black 1px solid;   

  14.   

  15.       background: rgba(245,245,245,1)    }   

  16.   

  17.   .test-div:before{   

  18.   

  19.       content: "";    

  20.   

  21.       display: block;   

  22.   

  23.       position: absolute;    

  24.   

  25.       top:8px;   

  26.   

  27.       width: 0;   

  28.   

  29.       height: 0;   

  30.   

  31.       border:6px transparent solid;   

  32.   

  33.       left:-12px;   

  34.   

  35.       border-right-color: rgba(245,245,245,1);   

  36.   

  37.   }   

  38.   

  39. </style>   

  40.   

  41. <div class="test-div"></div>   

 通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?让召唤:after穿着棉大衣来救场吧~
完整代码: 

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.   .test-div{   

  4.   

  5.       position: relative;    

  6.   

  7.       width:150px;   

  8.   

  9.       height: 36px;   

  10.   

  11.       border:black 1px solid;   

  12.   

  13.       border-radius:5px;   

  14.   

  15.       background: rgba(245,245,245,1)    }   

  16.   

  17.   .test-div:before,.test-div:after{   

  18.   

  19.       content: "";    

  20.   

  21.       display: block;   

  22.   

  23.       position: absolute;    

  24.   

  25.       top:8px;   

  26.   

  27.       width: 0;   

  28.   

  29.       height: 0;   

  30.   

  31.       border:6px transparent solid;   

  32.   

  33.   }   

  34.   

  35.   .test-div:before{   

  36.   

  37.       left:-11px;   

  38.   

  39.       border-right-color: rgba(245,245,245,1);   

  40.   

  41.       z-index:1    }   

  42.   

  43.   .test-div:after{   

  44.   

  45.       left:-12px;   

  46.   

  47.       border-right-color: rgba(0,0,0,1);   

  48.   

  49.       z-index: 0    }   

  50.   

  51. </style>   

  52.   

  53. <div class="test-div"></div>   

 好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~ (本兽不喜欢贴图片,体谅下额,需要的可以拷贝代码直接运行看效果,造轮子不仅仅是造轮子,也能让人加深印象,更好的理解)

2.作为内容的半透明背景层

比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

XML/HTML Code复制内容到剪贴板

  1. <style>  

  2.   

  3.     body{   

  4.   

  5.         background: url(img/1.jpg) no-repeat left top    

  6.   

  7.     }   

  8.   

  9.     .test-div{   

  10.   

  11.         position: relative;     

  12.   

  13.         width:300px;   

  14.   

  15.         height: 120px;   

  16.   

  17.         padding: 20px 10px;   

  18.   

  19.         font-weight: bold;   

  20.   

  21.     }   

  22.   

  23.     .test-div:before{   

  24.   

  25.         position: absolute;     

  26.   

  27.         content: "";     

  28.   

  29.         top:0;   

  30.   

  31.         left: 0;   

  32.   

  33.         width: 100%;     

  34.   

  35.         height: 100%;     

  36.   

  37.         background: rgba(255,255,255,.5);    

  38.   

  39.         z-index:-1    

  40.   

  41.     }   

  42.   

  43. </style>  

  44.   

  45. <!--这里容兽偷个懒,布局简单写写-->  

  46.   

  47. <div class="test-div">  

  48.   

  49.     <table>  

  50.   

  51.         <tr>  

  52.   

  53.             <td>Name</td>  

  54.   

  55.             <td><input placeholder="your name" /></td>  

  56.   

  57.         </tr>  

  58.   

  59.         <tr>  

  60.   

  61.             <td>PassWord</td>  

  62.   

  63.             <td><input placeholder="your password" /></td>  

  64.   

  65.         </tr>  

  66.   

  67.         <tr>  

  68.   

  69.             <td></td>  

  70.   

  71.             <td><input type="button" value="login" /></td>  

  72.   

  73.         </tr>  

  74.   

  75.     </table>  

  76.   

  77. </div>   

上面的代码拷贝过去,加上张图片可测试效果。

当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectideas

说完了:before和:after,我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意,从而导致一些布局和样式出问题)。

position 定位的问题

position属性规定了元素的定位类型,默认为static。

该属性还可以有下值:

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。

代码:

CSS Code复制内容到剪贴板

  1. <!--position:absolute-->   

  2.   

  3.   <style>   

  4.   

  5.       body{   

  6.   

  7.           height: 2000px    

  8.   

  9.       }   

  10.   

  11.       .test-div{   

  12.   

  13.           position:absolute;   

  14.   

  15.           left:50px;   

  16.   

  17.           top:50px      }   

  18.   

  19.   </style>   

  20.   

  21.   <div class="test-div">Hello World</div><!--position:fixed-->   

  22.   

  23.   <style>   

  24.   

  25.       body{   

  26.   

  27.           height: 2000px    

  28.   

  29.       }   

  30.   

  31.       .test-div{   

  32.   

  33.           position:fixed;   

  34.   

  35.           left:50px;   

  36.   

  37.           top:50px      }   

  38.   

  39.   </style>   

  40.   

  41.   <div class="test-div">Hello World</div><!--position:relative + position:absolute-->   

  42.   

  43.   <style>   

  44.   

  45.       .out-div{   

  46.   

  47.           width: 300px;   

  48.   

  49.           height: 300px;   

  50.   

  51.           background: purple;    

  52.   

  53.           margin:50px 0px 0px 50px;   

  54.   

  55.           position: relative      }   

  56.   

  57.       .in-div{   

  58.   

  59.           position:absolute;   

  60.   

  61.           left:50px;   

  62.   

  63.           top:50px      }   

  64.   

  65.   </style>   

  66.   

  67.   <div class="out-div">   

  68.   

  69.       <div class="in-div">Hello World</div>   

  70.   

  71.   </div>   

  72.    

z-index 元素堆叠排序

z-index用于设置或检索对象的堆叠顺序,对应的脚本特性为zIndex。
z-index的数值越大,该元素的堆叠层级越高。

代码: 

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.     .first-div{   

  4.   

  5.         width: 300px;   

  6.   

  7.         height: 300px;   

  8.   

  9.         background: purple;    

  10.   

  11.         position: absolute;   

  12.   

  13.         left:50px;   

  14.   

  15.         top:50px;   

  16.   

  17.         z-index: 1      }   

  18.   

  19.     .second-div{   

  20.   

  21.         position:absolute;   

  22.   

  23.         left:80px;   

  24.   

  25.         top:80px;   

  26.   

  27.         width:50px;   

  28.   

  29.         height: 50px;   

  30.   

  31.         background: white;   

  32.   

  33.         z-index: 2      }   

  34.   

  35. </style>   

  36.   

  37. <div class="first-div"></div>   

  38.   

  39. <div class="second-div"></div>   

 这里我们将第一个div和第二个div位置放到一起,方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index,所以能显示出,当我们把.first-div的z-index设置为3,这时候就看不到白色的小正方形了,它被紫色的大正方形无情的挡掉了..

zoom 元素缩放比例

zoom适用于所有元素,用于设置或检索对象的缩放比例,对应的脚本特性为zoom,原比例的值是1。 

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.     div{   

  4.   

  5.         width: 100px;   

  6.   

  7.         height: 100px;   

  8.   

  9.         float: left      }   

  10.   

  11.     .first-div{   

  12.   

  13.         background: purple;   

  14.   

  15.         zoom:1.5      }   

  16.   

  17.     .second-div{   

  18.   

  19.         background: black;   

  20.   

  21.         zoom:1      }   

  22.   

  23.     .third-div{   

  24.   

  25.         background: red;   

  26.   

  27.         zoom:.5      }   

  28.   

  29. </style>   

  30.   

  31. <div class="first-div"></div>   

  32.   

  33. <div class="second-div"></div>   

  34.   

  35. <div class="third-div"></div>   

 以上代码将会展示的依次是紫色-黑色-红色的div,大小分别是100px的1.5倍,1倍,0.5倍。 

em 和 rem 是什么

1em等于当前的字体尺寸,数值的改变意味着字体大小的调整。em 有继承这个特性,也就是说,外部父元素定义了字体的em大小,内部子元素会继承这一属性的样式。

rem = root em 。顾名思义,root即根部的,顶部的。也就是根部的em,这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。 

CSS Code复制内容到剪贴板

  1. <style>   

  2.   

  3.      body{   

  4.   

  5.        font-size: 12px;     

  6.   

  7.      }   

  8.   

  9.        

  10.   

  11.      div{   

  12.   

  13.          width: 200px;   

  14.   

  15.          height: 100px;   

  16.   

  17.          float:left      }   

  18.   

  19.      .first-div{   

  20.   

  21.          font-size: 1em      }   

  22.   

  23.      .second-div{   

  24.   

  25.          font-size: 2em      }   

  26.   

  27.      .third-div{   

  28.   

  29.          font-size: 1rem      }   

  30.   

  31.      .fourth-div{   

  32.   

  33.          font-size: 2rem      }   

  34.   

  35.  </style>   

  36.   

  37.  <div class="first-div">Hello World</div>   

  38.   

  39.  <div class="second-div">Hello World</div>   

  40.   

  41.  <div class="third-div">Hello World</div>   

  42.   

  43.  <div class="fourth-div">Hello World</div>   

感谢各位的阅读,以上就是“CSS选择器的技巧”的内容了,经过本文的学习后,相信大家对CSS选择器的技巧这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: CSS选择器的技巧

本文链接: https://www.lsjlt.com/news/81367.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS选择器的技巧
    这篇文章主要讲解了“CSS选择器的技巧”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择器的技巧”吧!什么是:before和:after? 该如何使用...
    99+
    2022-10-19
    css
  • CSS选择符的使用技巧
    这篇文章主要讲解了“CSS选择符的使用技巧”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS选择符的使用技巧”吧!CSS选择符说明这里介绍CSS的几个选择...
    99+
    2022-10-19
    css
  • 使用关系型选择器优化CSS选择器:提升选择效率的技巧
    优化CSS选择器:如何使用关系型选择器提高选择效率引言:在前端开发中,CSS选择器是一个非常重要的概念。它用来为HTML元素添加样式,控制页面的外观和布局。然而,在大型项目中,优化CSS选择器的效率显得尤为重要。本文将介绍如何使用关系型选择...
    99+
    2023-12-26
    优化 CSS选择器 关系型
  • CSS中ID选择器的使用技巧有哪些
    这篇文章主要为大家展示了“CSS中ID选择器的使用技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中ID选择器的使用技巧有哪些”这篇文章吧。关于I...
    99+
    2022-10-19
    id选择器 css
  • 云服务器选择技巧
    云服务器选择技巧有很多,以下是一些可能有用的技巧: 选择合适的容量、带宽和计算能力:选择服务器的容量和带宽大小要根据自己的需求进行选择,尽量选择适合自己的服务器。一般来说,服务器都会提供几种不同的配置,可以根据自己的需求选择适合的配置。...
    99+
    2023-10-26
    服务器 技巧
  • 提升CSS选择器通配符效率的技巧和建议
    优化CSS选择器通配符的技巧和建议在编写CSS样式表时,选择器是非常重要的一部分。然而,使用不当的选择器会导致性能问题,特别是选择器中包含了通配符。本文将探讨一些优化CSS选择器通配符的技巧和建议,帮助你更好地编写高效的CSS样式表。选择器...
    99+
    2023-12-26
    技巧与建议 优化CSS选择器 选择器通配符
  • jquery的选择器的使用技巧之如何选择input框
    下面的方法是选择name是redthree的 并且选中了的input 里面的 title属性的内容 <input name="redTrdd" title='xiaoming'...
    99+
    2022-11-15
    jquery选择器 选择input框
  • 高效jQuery选择器的技巧有哪些
    这篇文章主要为大家展示了“高效jQuery选择器的技巧有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“高效jQuery选择器的技巧有哪些”这篇文章吧。具体如...
    99+
    2022-10-19
    jquery
  • 云服务器选择技巧和方法
    云服务器选择技巧和方法可以有很多种,以下是一些常见的技巧和方法: 了解不同云服务商提供的服务:在开始使用云服务器之前,要了解这些云服务商提供的服务,比如它们使用的云计算平台、数据库、存储、安全、负载均衡等。这样可以避免在选择云服务商时浪...
    99+
    2023-10-26
    服务器 技巧 方法
  • 云服务器选择技巧有哪些
    选择云服务器需要考虑以下几个方面: 数据安全性:选择云服务器必须考虑数据的安全性,确保数据不会被未授权的人访问。选择可靠的供应商,例如AWS, Google Cloud Platform和阿里云等,可以保证数据的安全性。 可扩展性:选择...
    99+
    2023-10-26
    服务器 技巧 有哪些
  • Android View背景选择器编写技巧
    在项目中选择器的使用是非常多的,以下是本人在项目中的一些常用的背景选择器的写法 带边框下划线背景选择器效果图: 上面布局中放了10个CheckBox,然后设置了Check...
    99+
    2022-06-06
    选择器 view 选择 技巧 Android
  • 选择域名的小技巧分享
    本篇内容主要讲解“选择域名的小技巧分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“选择域名的小技巧分享”吧!技巧之一:很容易的输入我们注册的域名需要便于输入,不能用特别的符号或者字母或者文字组...
    99+
    2023-06-06
  • scrapy选择器css
    CSS是网页代码中非常重要的一环,即使不是专业的Web从业人员,也有必要认真学习一下CSS选择器.class                .intro &nb...
    99+
    2023-01-30
    选择器 scrapy css
  • 优化CSS选择器:提升网页开发效率的常用代码技巧
    提高网页开发效率:掌握常用CSS代码基本选择器的优化技巧导语:在网页开发中,CSS是必不可少的一部分。掌握常用的CSS代码基本选择器和优化技巧能够提高开发效率,减少代码量,并且使得网页加载更快。本文将介绍一些常用的CSS代码基本选择器及其优...
    99+
    2023-12-26
    优化技巧 网页开发效率 CSS代码选择器
  • 选择台湾云服务器的技巧有哪些
    选择台湾云服务器的技巧:1. 选择台湾云服务器时要仔细审查云服务器的配置,能否满足自身的业务需求,选择支持弹性升级的台湾云服务器。2. 选择独享IP的台湾云服务器,防止受到平台其他用户的业务影响,有利与稳定SEO优化中的网站排名。3. 选择...
    99+
    2022-10-22
    云服务器 台湾云服务器
  • css的几种选择器
    CSS(Cascading Style Sheets)是一种用于控制HTML和XML文件样式和布局的样式语言。在CSS中,选择器是指用于选择HTML元素的模式。选择器是CSS中最基本的组成部分之一,它可以将不同的样式应用于不同的元素,以达到...
    99+
    2023-05-21
  • css选择器哪些是高级选择器
    CSS选择器中有一些被称为高级选择器的选择器,它们提供了更强大和灵活的选择能力,可以根据元素的关系、状态和位置等条件进行选择。以下是CSS中常见的高级选择器:1. 后代选择器(Descendant Selector):使用空格分隔的选择器,...
    99+
    2023-10-21
    CSS选择器 高级选择器
  • css选择器有哪些属性选择器
    CSS选择器提供了多种属性选择器,用于根据元素的属性值来选择元素。这些属性选择器可以根据属性值的相等、包含、开始、结束等条件进行选择。以下是CSS中常见的属性选择器:1. 等于选择器(Equals Selector):使用方括号([])和等...
    99+
    2023-10-21
    属性选择器 CSS选择器
  • 云服务器选择技巧有哪些方面
    选择云服务器需要考虑以下几个方面: 数据安全性:选择云服务器必须考虑数据的安全性,确保数据不会被未授权的人访问。因此,应该采取必要的安全措施,例如使用强密码、双因素认证等等。 稳定性:云服务器需要能够长时间正常运行,因此需要确保它的运行...
    99+
    2023-10-27
    服务器 技巧 有哪些
  • 云服务器选择技巧有哪些内容
    云服务器是一种虚拟服务器软件,用于托管和提供云服务。以下是选择云服务器时需要考虑的一些技巧: 安全性:确保你的数据不受未经授权的访问和使用,并且在托管云服务时选择可靠的供应商,以确保数据的安全性。 可用性:确保你的云服务是可用的,这可以...
    99+
    2023-10-27
    服务器 技巧 内容
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作