![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
cdgogo
这个作者很懒,什么都没留下…
展开
-
css选择器:nth-child()的用法
:nth-child():nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。一、选择列表中的偶数标签:nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的,直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)五、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9):nth-last-chil原创 2020-10-13 12:06:08 · 68816 阅读 · 7 评论 -
css实现简单的下拉菜单
下拉菜单下拉菜单距离顶部有一定的距离,为了避免鼠标滑到二级菜单的过程中,二级菜单意外收起。可以在二级菜单的外部在包裹一层div,然后二级菜单距离外部包裹的div有一定的距离即可。.right { display: flex; align-items: center; i { margin: 0 12px; font-style: normal; } .tj, .fbsj { position: rel原创 2020-09-30 16:43:34 · 144 阅读 · 0 评论 -
css开发技巧总结(CSS穿透、一像素边框、:valid和:invalid表单即时验证、::selection美化选中文本)
用:valid和:invalid来做表单即时校验html5丰富了表单元素,提供了类似required,email,tel等表单元素属性。同样的,我们可以利用:valid和:invalid来做针对html5表单属性的校验。:required伪类指定具有required 属性的表单元素:valid 伪类指定一个通过匹配正确的所要求的表单元素:invalid伪类指定一个不匹配指定要求的表单元素<div class="container"> <div class="row"原创 2020-08-21 14:32:18 · 421 阅读 · 0 评论 -
radio单选框在项目中应用
.goods-info { margin-top: 50px; margin-bottom: 50px; .tag-label { padding-top: 7px; } .goods-tags { margin-top: 2rem; }}.tags-select { font-size: 0; >.tag-select { display: inline-block; .原创 2020-08-21 13:24:17 · 229 阅读 · 0 评论 -
css修改input,textarea中的placeholder属性
input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */input:-moz-placeholder{} /* Firefox版本4-18 */input::-moz-placeholder{} /* Firefox版本19+ */input:-ms-input-placeholder{} /* IE浏览器 */sass语法:@mixin place原创 2020-08-19 18:31:11 · 971 阅读 · 0 评论 -
css 伪类和伪类元素的区别
伪类伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时,我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。伪元素伪元素用于创建一些不在文档树中的元素,并为其添加样式。我们可以通过 :before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文原创 2020-08-19 18:05:25 · 183 阅读 · 0 评论 -
css实现单行、多行文本超出显示省略号(jq优化)
前言:项目中我们经常遇到这种需求,需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正。单行文本省略.ellipsis-line { border: 1px solid #f70505; padding: 8px; width: 400px; overflow: hidden; text-overflow: ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不.原创 2020-08-19 15:46:40 · 424 阅读 · 0 评论 -
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分。雪碧图的使用场景静态图片,不随用户信息的变化而变化。小图片,容量比较小(2~3k)。图片加载量比较大。目的减少Http请求数量,加速内容显示。因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的。使用使用雪碧图之前,我们需要知道雪碧图中各个图标的位置。![![在这里插入图片描述](ht.原创 2020-08-19 15:26:48 · 568 阅读 · 0 评论 -
css常用选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器(+)相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。器。<.原创 2020-08-19 15:16:56 · 7198 阅读 · 0 评论 -
综合运用:如何修改美化radio、checkbox的默认样式
现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给元素设置为透明,然后通过定位让用户看到的是元素,利用css的原生属性来判断用户的操作,设置选中后的label样式,即input[type=checkbox]:checked+label{}一、利用css3伪元素实现样式修改html.原创 2020-08-14 17:18:13 · 412 阅读 · 0 评论