【HelloCSS】第五章-CSS选择器和函数
时间：2023-03-30 13:41:53
CSS
作者：陈大羽头github：KRISACHAN在上一篇HTML标签和语义中简单介绍了HTML标签和它们的一些属性。坚持看到这里的亲表示衷心的感谢。本文将主要分享一些与CSS选择器（CSSSelectors）相关的内容，感兴趣的请继续阅读。CSS选择器（CSSSelectors）什么是选择器？简单的说，就是通过一些定义来选择特定的HTML标签。biu~首先我们来看一下选择器的分类：基本选择器类型选择器：简单的说就是直接选择HTML标签（没有<>的那种），例如：html{width:100%;};classselectionSelector：是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]鱼头注：上面的~、|、^、$类似于正则表达式的语法。如果不熟悉正则表达式的语法，可以看鱼头的githubCombiningselectorspaces:Descendantselectors,eg:.a.b。例子中，.a中带有.b的所有节点都被选中；>：子选择器，例如：.a>.b。例子中，.a中带.b的子节点全部被选中；~：后继选择符，例如：.a~.b。例子中选择的是.a之后的.b；+：直接后继选择符，例如：.a+.b。例子中选择的是.a之后的下一个.b；|:命名空间选择器，例如：.a|.b.例子中选择属于.a的.b，与.a.b相同，属于SelectorsLevel3。||：列选择器，eg:.a||.b.例子中选中的是.a代表的列的grid/table中单元格的.b，属于SelectorsLevel4的内容。伪类和伪元素伪类：伪-类是添加到选择器的关键字，用于指定要选择的元素的特殊状态。//语法selector:pseudo-class{property:value;}伪元素：伪元素是附加在选择器末尾的关键字，允许你修改被选元素特定部分的样式。一个选择器中只能使用一个伪元素。//语法selector::pseudo-element{property:value;}其实在掌握了CSS选择器之后，按照合理的排列组合，可以实现一些有趣的效果。当然，这些作用对于实际的业务逻辑可能没有什么帮助，甚至可能用不上，但也能为我们解决问题时提供一个方向。以下面的DEMO为例：一个纯CSS实现的表单验证。源码在：codepen，你也可以复制粘贴以下代码，在浏览器中查看。<样式>:root{--error-color:red;}.form>input{margin-bottom:10px;}.form>.f-tips{颜色：var(--error-color);显示：无；}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;}帐号：请输入正确的账号密码：请输入正确的密码选择器的优先级选择器也有优先级。根据不同的组合，标签的效果可以超越Writing写字之外，我们先来看一张经典且通俗易懂的图。根据上图，不同的选择器有不同的权重。inlinestyle:1000ID:100Class:10HTMLlabel:1fishhead注：据张新旭老师在Interesting:256classselectorscankill1idselectorSharing:256cascadingclassselectorscankill1idselectordevice（目前Chrome没有）这个现象）。鱼头注：嗯嗯嗯，上图是不同情况下的CSS优先级对比图，有兴趣的可以一一测试。Overbearing!important当在样式声明中使用!important规则时，此声明将覆盖任何其他声明。虽然从技术上讲!important与优先级无关，但它与优先级直接相关。使用!important是一个坏习惯，如果可以就不要使用它。以上都是正确的，但真的没有办法覆盖!important吗？其实不是，你大概可以参考下面的例子：
可以建个DEMO看看上面的效果，你会发现div的宽度还是200px，其实就像max-width,mix-width,max-height,min-height等。条件属性可以覆盖!important。但是这里出现了另一个问题。有什么问题？就算你在html属性里写中文，也很有可能被队友打。CSS的作用CSS作为使命是服务于标记语言的声明性语言，被很多程序员看不起（其实就是看不起学不来的语言）。看不起它的原因之一是CSS没有逻辑和功能。嗯，十年前是这样，那现在呢？根据MDN显示的关键词索引，共有86个CSS函数。根据w3cplus可以分为以下几类：属性函数：attr()；背景图像函数：linear-gradient(),radial-gradient(),conic-gradient(),repeating-linear-gradient(),repeating-radial-gradient(),repeating-conic-gradient(),image-set(),图片(),网址(),元素();颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；图形函数：circle()、ellipse()、inset()、polygon()、path()过滤函数：blur()、brightness()、contrast()、dropshadow()、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中的函数和CSSCONF中张新旭老师的分享，里面讲了很多关于CSS函数的应用。当然，你也可以大胆发挥自己的想象力，创造出各种奇特有趣的效果。由于功能较多，不可能在一篇文章中一一介绍。接下来鱼头会分享一些喜欢的功能。有兴趣的也可以加鱼头微信“krisChans95”或关注鱼头的公众号“鱼头的网络世界”，与鱼头一起探索更多可能。element()element()是属于CSSImageValueandReplacedContentModuleLevel4的后台函数，element()可以将网站的部分内容渲染为图片。用过Vue的人对双向绑定一定不陌生，对它的实现也一定很熟悉。那么如果鱼头今天告诉你，双向绑定不一定需要JS？首先，让我们看一张效果图。地址在我的codepen上，有兴趣的可以随时查看。以上就是element()的实际效果，用法也很简单，在要复制的对象选择器中写入即可。但是，它目前仅在较新的Firefox浏览器中可用。conic-gradient()conic-gradient()是css-images-4的新成员。是可以实现不同角度渐变色的功能。这是一个彩盘，实现起来比较简单。地址在我的codepen上，有兴趣的可以随时看。还有什么？以上简单介绍了一些CSS选择器和CSS函数。根据不同的场景，不同的组合，我们可以达到很多意想不到的效果。当然，前提是浏览器支持，我们的想象力支持。当然，能不能用在业务上见仁见智，但总的来说，CSS已经不再是一种简单的声明式语言。或许在一般环境下，CSS玩的再好也无法撼动JS的地位（没有撼动这回事，它们是相辅相成的）。但它也可以为我们的产品增添一点光彩，不是吗？参考资料：快速理解新的CSS列选择器双竖线(||)CSS_SelectorsSelectorsfromlevel4to1aboutCSSweight(priority)了解CSS优先级规则Somethingsyoushouldknow-CSSweightCSSSpecificity:ThingsYouShouldKnowPriorityFunctionsinCSSCSSValuesandUnitsModuleLevel4SelectorsLevel3SelectorsLevel4【HelloCSS】系列【HelloCSS】是CSS基本概念主题系列文章，旨在帮助大家更深入地理解和提升CSS在中的地位开发商的心思。由于本人鱼头水平有限，文笔水平有限，如果您发现文章中有不合理或不正确的地方，欢迎指出。我将不胜感激；如果您通过文章有什么想法或疑问，希望您能积极留言，我们共同探讨；如果你通过这一系列的文章有所收获，这会让鱼头大喜过望！如果你也喜欢CSS，喜欢讨论技术，或者对本文或本系列有什么意见或建议，非常欢迎你加鱼头微信好友一起讨论。当然，鱼头也希望和大家聊聊生活和爱好。谈论一切。鱼头微信公众号是：krisChans95，也可以扫描二维码加好友，备注“顺丰”即可
