【Hello CSS】第五章-CSS的选择器与函数

• 做者：陈大鱼头
• github： KRISACHAN

在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟 CSS选择器（CSS Selectors） 相关的内容，有兴趣的请继续往下看。

CSS选择器（CSS Selectors）

啥叫选择器？简单来讲就是经过一些定义来选中特定的HTML标签。biu~

首先咱们来看看选择器的分类：

基本选择器

1. 类型选择器：简单来讲就是直接选择HTML标签（不带<>的那种），例如：html {width: 100%;};

2. 类选择器：就是HTML标签中class属性的值（但就是给每一个值加上了.），例如：.div {width: 100%;};

3. ID选择器：就是HTML标签中id属性的值（但就是给每一个值加上了#，可是要注意，一个文档中的ID应是惟一的，但能不能写多个？其实也是能够，只是不建议这么作，至于为何，后面的文章会进行讲解）;

4. 通用选择器：写个 *，啥HTML标签都选中了。例如：* {width: 100%;}

5. 属性选择器：就是根据HTML标签里的属性选择，语法大概以下：

   [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

鱼头注：上面的~、|、^、$跟正则表达式的语法类似，对正则表达式语法不熟的能够看鱼头的github

组合选择器

1. 空格：后代选择器，例如：.a .b。在例子中选中的就是.a里面的全部带有.b的节点；
2. >：子代选择器，例如：.a > .b。在例子中选中的就是.a里面的全部带有.b的子节点；
3. ~：后继选择器，例如：.a ~ .b。在例子中选中的就是在.a后面的.b；
4. +：直接后继选择器，例如：.a + .b。在例子中选中的就是在.a后面下一个.b；
5. |: 命名空间选择器，例如：.a | .b。在例子中选中的就是属于.a的.b，跟.a .b同样，属于Selectors Leve 3的内容。
6. ||：列选择器，例如：.a || .b。在例子中选中的就是由.a表示的列的网格/表中的单元格的.b，属于Selectors Level 4的内容。

伪类与伪元素

1. 伪类：伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。

   // 语法
   selector:pseudo-class {
     property: value;
   }
   复制代码

2. 伪元素：伪元素是一个附加至选择器末的关键词，容许你对被选择元素的特定部分修改样式。一个选择器中只能使用一个伪元素。

   // 语法
   selector::pseudo-element {
     property: value;
   }
   复制代码

其实掌握了CSS的选择器以后，是能够根据合理的排列组合来实现一些比较有趣的效果的，固然这些效果可能对实际业务逻辑没什么帮助，甚至不必定能用，可是也能够给咱们在解决问题的时候提供一个方向。就例如如下DEMO：一个用纯CSS实现的表单验证。

源码在：codepen，你也能够把如下代码复制粘贴，在浏览器查看。

<style> :root { --error-color: red; } .form > input { margin-bottom: 10px; } .form > .f-tips { color: var(--error-color); display: none; } input[type="text"]:invalid ~ input[type="submit"], input[type="password"]:invalid ~ input[type="submit"] { display: none; } input[required]:focus:invalid + span { display: inline; } input[required]:empty + span { display: none; } input[required]:invalid:not(:placeholder-shown) + span { display: inline; } </style>

  <form class="form" id="form" method="get" action="/api/form">
    帐号：
    <input data-title="帐号" placeholder="请输入正确的帐号" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">请输入正确的帐号</span>

    密码：
    <input data-title="密码" placeholder="请输入正确的密码" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">请输入正确的密码</span>

    <input name="button" type="submit" value="提交" />
  </form>

复制代码

选择器的优先级

选择器也有优先级，根据不一样的排列组合，标签的效果是能够超出想象的。

首先咱们来看一张经典又通俗易懂的图。

根据上图所示，不一样的选择器有不一样的权重。

• 内联样式：1000
• ID：100
• Class：10
• HTML标签：1

鱼头注：根据张鑫旭老师在有趣：256个class选择器能够干掉1个id选择器分享过：256个级联class选择器 能够击败 1个id选择器（目前chrome已无此现象）。

鱼头注：Mmmmmm，上图就是CSS优先级的不一样状况的对比图，有兴趣的亲能够一个一个测试。

霸道的!important

当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其余声明。虽然技术上!important与优先级无关，但它与它直接相关。

使用!important是个坏习惯，能不用就不用。

上面所说的都是对的，可是，真的没办法覆盖!important吗？

其实也不是，大概能够参考下面的例子：

<style> div[属性="标签"] { width: 300px !important; height: 200px; background: #e6e6e6; max-width: 200px; } </style>
    <div 属性="标签"></div>
复制代码

你们能够建个DEMO看看上面的效果，大家会发现，div的宽度仍是200px，其实像max-width、mix-width、max-height、min-height等条件属性是能够覆盖!important的。只不过这里会出现另一个问题。 什么问题呢？ 就是在HTML的属性里写中文的话，极可能会被队友打屎。

CSS的函数

CSS做为一门使命是服务于标记语言的声明式语言，不少程序员看不起它**（其实是看不起又学不会的一门语言）**。看不起的缘由之一就是CSS没有逻辑能力跟函数功能，嗯，十年前是这样，那么现在呢？

根据MDN所陈列的关键字索引，css函数一共有86个。

根据w3cplus中能够划分为如下几类：

• 属性函数：attr()；
• 背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
• 颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
• 图形函数：circle()、ellipse()、inset()、polygon()、path()
• 滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
• 转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
• 数学函数：calc()、min()、max()、mixmax()、repeat()；
• 缓动函数：cubic-bezier()、steps()；
• 其余函数：counter()、counters()、toggle()、var()、 symbols()。

这些函数各有各的功能，按需排列组合能够实现不少很酷炫的效果。在这里必定要安利大漠老师的CSS中的函数以及张鑫旭老师在CSS CONF中的分享，里面就讲了不少关于CSS 函数的应用。固然各位小伙伴也能够大胆发挥想象，创造出各类好玩奇异的效果。

因为函数不少，一篇文章也没办法所有介绍完，接下来鱼头会就几个比较喜欢的函数进行分享，有兴趣的亲也能够添加鱼头微信“krisChans95”或者关注鱼头的公众号“鱼头的Web世界”与鱼头一同探讨更多的可能。

element()

element()是属于CSS Image Value and Replaced Content Module Level 4中的背景函数。element()能够将网站中的部份内容当成图片渲染。

各位使用vue的亲，必定对双向绑定不陌生，对它的实现必定也是了然如胸的，那么若是今天鱼头告诉你，双向绑定不必定须要JS呢？ 首先咱们来看个效果图。

地址在我codepen上，有兴趣的能够随时去看。

以上即是element()的实际效果，用法也很简单，就是把要复制的对象选择器写进去就好。不过目前只能在较新的火狐浏览器里使用。

conic-gradient()

conic-gradient()是属于css-images-4的一位新成员。就是能够实现不一样角度渐变色的一个函数。

这是彩色圆盘，实现起来也比较简单，地址在我codepen上，有兴趣的能够随时去看。

还有什么？

上面就简单的介绍了一些关于CSS选择器跟CSS函数，根据不一样的场景，不一样的组合，咱们能够实现不少意想不到的效果，固然前提是浏览器支持以及咱们的想象空间支持了。固然能不能用在业务上这就见仁见智了，但总的来讲，CSS已经再也不是一门简单的声明式语言了，或许在大环境下，CSS玩出花也不能撼动JS一点的地位（也不存在撼动一说，原本就是相辅相成的）。可是也能为咱们的产品多增添一点亮点不是吗？

参考资料：

快速了解CSS新出的列选择符双管道（||）

CSS_Selectors

Selectors from level 4 to 1

关于CSS权重(优先级)的理解

CSS 优先级规则

你应该知道的一些事情——CSS权重

CSS Specificity: Things You Should Know

优先级

CSS中的函数

CSS Values and Units Module Level 4

Selectors Level 3

Selectors Level 4

【Hello CSS】系列

【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助你们更深入地了解而且提升CSS在各位开发者心目中的地位。因为鱼头我水平有限，文笔有限，若是各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会很是感谢的；若是经过文章有任何想法或疑问，也但愿各位能积极留言，咱们互相探讨；若是经过本系列文章有所收获，这就让鱼头我喜不自胜了！

若是你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。