资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/【Hello CSS】第五章-CSS的选择器与函数

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

cod7ce / 3369人阅读

摘要：内联样式标签鱼头注根据张鑫旭老师在有趣个选择器可以干掉个选择器分享过个级联选择器可以击败个选择器目前已无此现象。

作者：陈大鱼头


github： KRISACHAN

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

CSS选择器（CSS Selectors） 
啥叫选择器？简单来说就是通过一些定义来选中特定的HTML标签。biu~

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

基本选择器

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

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

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

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

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

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

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

组合选择器

空格：后代选择器，例如：.a .b。在例子中选中的就是.a里面的所有带有.b的节点；

>：子代选择器，例如：.a > .b。在例子中选中的就是.a里面的所有带有.b的子节点；

~：后继选择器，例如：.a ~ .b。在例子中选中的就是在.a后面的.b；

+：直接后继选择器，例如：.a + .b。在例子中选中的就是在.a后面下一个.b；

|: 命名空间选择器，例如：.a | .b。在例子中选中的就是属于.a的.b，跟.a .b一样，属于Selectors Leve 3的内容。

||：列选择器，例如：.a || .b。在例子中选中的就是由.a表示的列的网格/表中的单元格的.b，属于Selectors Level 4的内容。

伪类与伪元素

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

// 语法
selector:pseudo-class {
  property: value;
}

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

// 语法
selector::pseudo-element {
  property: value;
}

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

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



  

    账号：
    
    请输入正确的账号

    密码：
    
    请输入正确的密码
选择器的优先级 
选择器也有优先级，根据不同的排列组合，标签的效果是可以超出书写书写之外的。

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

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

内联样式：1000

ID：100

Class：10

HTML标签：1

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

鱼头注：Mmmmmm，上图就是CSS优先级的不同情况的对比图，有兴趣的亲可以一个一个测试。

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

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

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

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

大家可以建个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海洋 ”，随时与鱼头互动。欢迎！衷心希望可以遇见你。

GPU云服务器 云服务器 第五章 css选择 css检测函数 css选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115007.html

相关文章

  • [CSS]《CSS揭秘》第五章——字体排印

    摘要：连字符断行需要在的属性指定支持的语言尚未支持与结合使用插入换行避免首个前面也加入空行换行符避免逗号前面的空格，不一定为文本行的斑马条纹调整的宽度连字华丽的符号自定义下划线现实中的文字效果发光字效果环形文字 连字符断行 hyphens:auto; *:需要在HTML的lang属性指定支持的语言**：chrome尚未支持*：与word-wrap: break-word结合使用 插入换行 d...

    lordharrd 评论0 收藏0

  • 《CSS揭秘》第五章：字体排印

    摘要：字体排印连字符断行在杂志和书籍中，经常可以见到两端对齐效果。原因是会带来糟糕的显示问题。比如大多数衬线字体中的和。在第三版中，引入了属性华丽的符号通过规则实现只对符号应用特殊的字体。 字体排印 连字符断行 在杂志和书籍中，经常可以见到两端对齐效果。但是在网页设计中，两端对齐效果很少被使用。原因是会带来糟糕的显示问题。text-align: justufy; showImg(https:...

    lk20150415 评论0 收藏0

  • 《Python基础教程第二版》第五章-条件、循环和其他语句(一)

    摘要：所解包的序列中的元素数量必须和赋值符号左边的变量数量完全一致。其中，冒号标识语句块开始块中每一个语句都是缩进相同量退回到和已经闭合的块一样的缩进量时，表示当前块结束。成员资格运算符字符串和序列比较字符串可按照字母顺序比较。 print和import print打印多个表达式，用逗号,隔开 print abc:, 42, nonono #输出在每个参数之间添加空格 print在结尾处加上...

    宋华 评论0 收藏0

  • 流畅的python读书笔记-第五章 一等函数

    摘要：可以通过定位参数和关键字参数传入的形参多数函数的参数属于此类。就像数据格式化一样数据带上标签自行创建函数它会自行创建函数。创建的函数会在对象上调用参数指定的方法自己创建函数冻结参数这个高阶函数用于部分应用一个函数。 高阶函数 接受函数为参数，或者把函数作为结果返回的函数是高阶函数 def reverse(word): return word[::-1] ...

    546669204 评论0 收藏0

  • 《Java8实战》-第五章读书笔记（使用流Stream-01）

    摘要：跳过元素流还支持方法，返回一个扔掉了前个元素的流。归约到目前为止，我们见到过的终端操作都是返回一个之类的或对象等。这样的查询可以被归类为归约操作将流归约成一个值。通过反复使用加法，你把一个数字列表归约成了一个数字。 使用流 在上一篇的读书笔记中，我们已经看到了流让你从外部迭代转向内部迭代。这样，你就用不着写下面这样的代码来显式地管理数据集合的迭代（外部迭代）了： /** * 菜单 ...

    OldPanda 评论0 收藏0

发表评论

登陆后可评论

0条评论

cod7ce

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<