Coco
CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 ## 简单的语法介绍 + [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 + [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 + [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。 ####...
今天我们来学习一个有意思的多行文本输入打字效果，像是这样：  这个效果其实本身并非特别困难，实现的方式也很多，在本文中，**我们更多的会聚焦于整个多行打字效果最后的动态光标的实现**。 也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果：  ## 单行文本打字效果 在此之前，我们快速看一个之前在 [【Web动画】科技感十足的暗黑字符雨动画](https://github.com/chokcoco/iCSS/issues/129) 分享过的，非常简单的单行打字效果动画。 在这里的单行打字效果，其核心就是就是让字符一个一个的出现，像是这样：  这里借助了 animation 的 `steps` 的特性实现，也就是逐帧动画。 从左向右和从上向下原理是一样的，以从左向右为例，假设我们有 26 个英文字符，我们已知 26 个英文字符组成的字符串的长度，那么我们只需要设定一个动画，让它的宽度变化从 `0 - 100%` 经历 26 帧即可，配合...
Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道，在此前，虽然有 [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) 规范可以控制滚动条，可是，`::-webkit-scrollbar` 是非标准特性，在 MDN 文档中都明确了不应该在生产环境使用它。 > MDN - ::-webkit-scrollbar > Non-standard: This feature is non-standard and is not on a standards track....
最近，群里在讨论一个很有意思的线条动画效果，效果大致如下：  简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用 JavaScript/Canvas 的基础上，使用纯 CSS/SVG 的方式，我们可以如何大致的还原上述的线条动画效果。 ## 基于 SVG 的线条动画效果 谈到线条动画，尤其是不规则路径或者是复杂路径，我们第一时间应该想到的就是 SVG 中的 stroke-dasharray 和 stroke-dashoffset。 这两个属性，我们在多篇文章中都有提及，也是非常有意思的线条动画效果，感兴趣的可以一并拓展阅读： + [CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果](https://github.com/chokcoco/iCSS/issues/142) + [巧用 CSS 实现动态线条...
使用方法
## Install 谷歌应用商店搜索 **URLHelper** 即可。  --- 1. 在 chrome 浏览器中访问 chrome://extensions（或者单击多功能框最右边的按钮：打开 Chrome 浏览器菜单，并选择更多工具(L)菜单下的扩展程序(E)，进入相同的页面）。  2. 确保右上角开发者模式复选框已选中，单击**加载已解压的扩展程序…**，弹出文件选择对话框。  3. 浏览至您的扩展程序文件所在的目录，并选定。 ## How to use 假设页面URL： `https://github.com/chokcoco/UrlHelper/issues/new?proj=pay_v3&page=pay&tvid=074232E000E081E142ED066B56B88FB6&bid=31001&appid=101161688&tvskey=&cid=&vid=&pid=&mid=&type=0&openid=&access_token=&Q-UA=QV%3D1%26PR%3DVIDEO%26PT%3DTVMORE%26CHID%3D10009%26RL%3D1920%2A1080%26VN%3D2.6.0%26VN_CODE%3D1604%26SV%3D5.1.1%26DV%3DJurassicPark%26VN_BUILD%3D1007%26MD%3DMiBOX3%26BD%3DJurassicPark%26TVKPlatform%3D2280603&from=200&ftime=1478764649186&ott_flag=1&platform=&vipbid=90&source1=705&source2=701&listid=&matchid=&channelid=pay&main_login=&kt_main_login=&vuserid=&vusession=&oauth_consumer_key=101161688&kt_userid=&kt_license_account=SNM_0016378515&kt_boss_channel=tx_tvmore&kt_login_support=qq%2Cwx%2Cph&pkglist=1+2+3&kt_login=&_=1505114974362#` 使用前刷新页面，然后点击扩展程序图标： 
## 4、从倒影说起，谈谈 CSS 继承 **inherit** 给定一张有如下背景图的 div： 制作如下的倒影效果： 方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化，`div` 大小怎么变化，我们都不用去改我们的代码。 ### 法一：-webkit-box-reflect 这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡： > 基本上是只有 -webkit- 内核的浏览器才支持。  不过使用起来真的是方便，解题如下： ``` css div{ -webkit-box-reflect: below; } ``` [-webkit- 内核下查看Demo](http://codepen.io/Chokcoco/pen/ORbvxJ)...
今天逛[博客网站 -- shoptalkshow](https://shoptalkshow.com/)，看到这样一个界面，非常有意思：  觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 ## border 属性 谈到边框，首先会想到 `border`，我们最常用的莫过于 `solid`，`dashed`，上图中便出现了 `dashed`。 除了最常见的 `solid`，`dashed`，CSS border 还支持 `none`，`hidden`， `dotted`， `double`， `groove`， `ridge`， `inset`， `outset` 等样式。除去 `none`，`hidden`，看看所有原生支持的 border 的样式： ...
## 12、几个特殊且实用的伪类选择器（`:root`,`:target`,`:empty`,`:not`） 每一个 CSS 伪类及伪元素的出现，肯定都是为了解决某些先前难以解决的问题而应运而生的。 学习了解它们，是解决许多其他复杂 CSS 问题或者前沿技术的基础。 这里是 4 个基本的结构性伪类选择器，结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。 ### `:root` 伪类 `:root` 伪类匹配文档树的根元素。应用到HTML，`:root` 即表示为``元素，除了优先级更高外，相当于html标签选择器。 #### 语法样式 ````CSS :root { 样式属性 } ```` 譬如，`:root{background:#000}` ，即可将页面背景色设置为黑色。 由于属于 CSS3 新增的伪类，所以也可以作为一种...
今天群里讨论了一个非常有意思与 CSS 选择器相关的题目。题目如下： 假设我们如下的 HTML 结构： ```HTML aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc ``` 效果如下：  **如何在不添加类名的情况下，快速的选取第一个 class 为 `.cc` 的元素**？ 当然，上面的结构示意图只是一种可能的情况，这里想表述的场景的意思是： 1. 我们希望选取的 `.cc` 元素，在其父元素下，存在多个 `.cc`，**所以需要精准定位第一个**；...
在之前，我们有一篇介绍带圆角的渐变边框的纯 CSS 实现的文章： + [巧妙实现带圆角的渐变边框](https://github.com/chokcoco/iCSS/issues/77) 会有这么一个话题的本质在于，在过往，想使用纯 CSS 实现纯粹的，内部透明渐变边框，是一件非常困难的事情，像是这样：  这个效果的几个核心难点： 1. 边框带渐变色 2. 边框支持设置 `border-radius` 3. 内部支持透明 思考一下，使用 CSS，我们可以如何实现这个效果？ ## 过往比较好的方法 之前有一个比较接近上面的诉求的方法。主要利用了 `clip-path` 和 `border-image`。 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)，大家应该都非常熟悉了。它可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。 简而言之，这里我们只需要在 `border-image`...