CSS魔法殿堂：玩转伪元素和内容属性

前言继上一篇《CSS魔法堂：稍稍深入伪类选择器》记录了伪类之后，自然要把我的“魔法掌”伸向伪元素^_^。本文将讲述伪元素和强大的Contet属性，让我们更好的通过伪元素实现更多的可能性！认识伪元素说到伪元素，我首先想到的是::before和::after。它们实际上是将第一个子节点插入到与其附加的选择器命中的元素上，并附加最后一个子节点。然后我不禁要问：“直接加上.before和.after两个类不一样吗？”其实使用伪元素::before和::after有以下两个好处：减少HTML代码量，有利于SEO；提高JavaScript查询元素的效率。那为什么会有这两个好处呢？原因是伪元素不存在于DOM中，而是存在于CSSOM中。不会出现在HTML代码和DOMTree中，量少自然提高效率。但是这也引入了一个问题——我们不能完全通过JavaScript来操作伪元素（我会在下一节中给大家解释）。一大波伪元素袭来。除了::before和::after，以下内容千万不要错过！:first-line:只能用于块级元素。用于设置附加元素的第一行内容的样式。可用的CSS属性包括字体、颜色、背景、字间距、字母间距、文本装饰、垂直对齐、文本转换、行高、清晰。:first-letter:只能用于块级元素。用于设置从属元素首字母的样式。可用的CSS属性有font、color、background、marin、padding、border、text-decoration、vertical-align、text-transform、line-height、float、clear。::selection：匹配选中部分的内容。可用的CSS属性有背景、颜色。有没有发现有的伪元素前缀是:，有的是::？::是CSS3的写法。其实除了::selection，其他伪元素都可以使用这两个前缀。为了兼容性你可以选择使用:，使用::方便区分伪元素和伪类，但是我还是建议使用::来提高可读性，让postcss等工具为我们处理兼容性。::before和::after注意事项默认显示：inline；必须设置内容属性，否则一切都是无用的；默认user-select:none，即::before和::after的内容不能被用户选中；伪元素和伪类的组合就像：.target:hover::after。JavaScript操作伪元素?前面提到，伪元素只位于CSSOM中，所以我们只能通过操作CSSOMAPI——window.getComputedStyle来读取伪元素的样式信息。注意：我们只能读取，不能设置哦！{-类型的window.getComputedStyle-}dataPseudoElement=":before"|“::之前”|“：之后”|“::之后”|“：一线”|“::一线”|":first-letter"|“::第一个字母”|“::选择”|“：背景”|“::背景”|Nullwindow.getComputedStyle::HTMLElement->PesudoElement->CSSStyleDeclaration{-CSSStyleDeclaration实例方法-}dataCSSPropertyName="float"|“背景色”|......数据DOMPropertyName="cssFloat"|“样式浮动”|“背景颜色”|......--IE9+方法CSSStyleDeclaration#getPropertyValue::CSSPropertyName->*--IE6~8方法CSSStyleDeclaration#getAttribute::CSSPropertyName->*--键值对获取CSSStyleDeclaration#[DOMPropertyName]->*示例：.target[title="helloworld"]::after{display:inline-block;内容：属性（标题）；背景：红色；文本装饰：下划线；}constelTarget=document.querySelector(".targett")constcomputedStyle=window.getComputedStyle(elTarget,"::after")constcontent=computedStyle.getPropertyValue("content")constbg=computedStyle.getAttribute("backgroundColor")consttxtDecoration=computedStyle["文本装饰"]console.log(content)//"helloworld"console.log(bg)//redconsole.log(txtDecoration)//通过Content属性下划线播放这里我们可以使用::before和::after来实现tooltip，etc是可以的，但其实更强大也更耗时的研究才刚刚开始！那就是Content属性，不仅可以简单直接的设置一个字符串作为伪元素的内容，它还有一个一定的编程能力，就像上面的attr(title)，以其附属元素的title属性作为content值，请允许我给大家介绍一下！div::after{content:"普通字符串";content:attr(父元素的html属性名);content:url(图片、音频、视频等资源的url);/*使用unicode字符集，采用4位16进制编码*但不同浏览器显示差异，移动端识别更差*/content:"\21e0";/*content的多个值可以任意组合，每个部分用空格隔开*/content:"'"attr(title)"'";/*自增计数器，用于插入数字/字母/罗马数字数字*counter-reset:[?]+，必填，用于标识自增计数器的范围，为自定义名称，为起始编号，默认为0。*counter-increment:[?]+，用于标识counter与实际关联的范围，是counter-reset中的自定义名称，是步长，默认为1。*:disc|圈子|正方形|十进制|小数前导零|低罗马|上罗马||上字母*/content:counter(,);/*取父子元素的qutoes值作为content的值*/content:open-quote|关闭引用|无-开引号|no-close-quote;}换行符：HTML实体是 ，CSS是\A，JS是\uA。可以看到Content接受了6种类型和一种组合方法。其中最后两个比较复杂，后面我们会一一讲解。自定义计数器HTML给了我们ul或ol和li来实现列表，但是如果我们想实现一个更有用的列表怎么办？内容属性的计数器类型值可以帮助我们。.dl.dt{chapter1}.dd{text11}.dd{text12}.dt{chapter2}.dd{text21}/*CSS部分*/.dl{counter-reset:dt0;/*表示在解析为.dl时将dt计数器重置为0*/&.dt{counter-reset:dd0;/*表示在解析为.dt时将dd计数器重置为0*/&::before{counter-increment:dt1;/*表示当解析为.dt时，dt计数器将递增1*/content:counter(dt,lower-roman)"";}}&.dd::before{反增量：dd1;/*表示解析为.dd时，dd计数器会加1*/content:counter(dd)"";}}通过counter-reset定义和重置计数器，通过counter-incrementValue增加计数器的值，然后使用counter来决定使用哪个计数器，指定使用哪种样式。如果使用JavaScript来表示应该是这样的constglobalCounters={"__temp":{}}functionresetCounter(name,value){globalCounters[name]=value}functionincrementCounter(name,step){constoVal=globalCounters[name]如果(oVal){globalCounters[name]=oVal+step}else{globalCounters.__temp[name]=step}}functioncounter(name,style){returnglobalCounters[name]||globalCounters.__temp[name]}functionapplyCSS(mount){constclz=mount.classNameif(clz=="dl"){resetCounter("dt",0)constchildren=mount.childrenfor(leti=0;i,,?).ol.li.ol.li{a}.li{b}.li.ol.li{c}.ol{counter-重置：ol；&.li::before{反增量：ol;内容：计数器（ol，“。”）；}}内容限制只有IE8+支持Content属性；除Opera9.5+外的所有元素都支持另外，其他浏览器只能在:before,:after;中使用无法通过JS获取Counter和Counters的计算结果，结果只能是“counter(mycoounter)\”\“”。自定义引号引号，一个很少有人在意的符号，其实在不同的文化中使用不同的引号。例如，简体中文使用“”，而日本使用“”。那么我们根据自己的需要自定义引号呢？答案是肯定的。它可以通过开报价、闭报价、无开报价和无闭报价来实现。让我们通过下面的例子来理解。会根据父元素的lang属性自动创建::before和::after插入引号。p[lang=en]>q{English}p[lang=no]>q{Norwegian}p[lang=zh]>q{Chinese}p[lang=en]>q.no-quote{English2}div[lang=no]>.quote{Norwegian2}CSS片段：p[lang=en]>q{quotes:"";/*定义引号*/}p[lang=en]>q.no-quote::before{content:no-open-quote;/*或内容：无；*/}div[lang=no]>.quote{quotes:"<<-""->>";}div[lang=no]>.quote::before{content:open-quote;}div[lang=no]>.quote::after{content:close-quote;}例如分割线p。sep{or}.sep{位置：相对；文本对齐：居中；&::before,&::after{内容：“”；框大小：边框框；高度：1px；宽度：50%；border-left:3emsolidtransparent;border-right:3emsolidtransparent;位置：绝对；顶部：50%；}&::before{左：0;}&::after{右：0;}}只读效果（通过屏蔽原始元素实现）。input-group{position:relative;&.readonly::before{内容：“”；位置：绝对；宽度：100%；高度：100%；顶部：0；左：0；}}counter.selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}.selection-count.selections{计数器重置：选择计数；&input:checked{counter-increment:selection-count;}}.selection-count::before{content:counter(selection-count);}最后，尊重原创，转载请注明出处：https://www.cnblogs.com/fsjoh..。胖约翰^_^参考http://www.wozhuye.com/compat...https://dev.opera.com/article...