经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
详解CSS 伪元素及Content 属性 _CSS教程_CSS
来源：jb51　　时间：2018/9/25 19:07:20　　对本文有异议

初识伪元素

 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样的吗？”  其实使用伪元素::before和::after以下两个好处：

1.HTML的代码量减少，对SEO有帮助；

2.提高JavaScript查询元素的效率。

 那为什么会这两好处呢？原因就是伪元素并不存在于DOM中，而是位于CSSOM，HTML代码和DOM Tree中均没有它的身影，量少了自然效率有所提升。但这也引入一个问题——我们没办法通过JavaScript完全操控伪元素（我将在下面一节为大家讲述）

一大波伪元素来了

除了::before和::after外，别漏了以下的哦！

1.:first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。

2.:first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

3.::selection：匹配选中部分的内容。可用的CSS属性为background,color。

有没有发现有的伪元素前缀是:有的却是::呢？::是CSS3的写法，其实除了::selection外，其他伪元素既两种前缀都是可以的，为兼容性可选择使用:，为容易区分伪元素和伪类则使用::，但我还是建议使用::来提高可读性，兼容性就让postcss等工具帮我们处理就好了。

::before和::after的注意事项

1.默认display: inline；

2.必须设置content属性，否则一切都是无用功；

3.默认user-select: none，就是::before和::after的内容无法被用户选中的；

4.伪元素和伪类结合使用形如：.target:hover::after。

JavaScript操作伪元素

 上文提到由于伪元素仅位于CSSOM中，因此我们仅能通过操作CSSOM API——window.getComputedStyle来读取伪元素的样式信息，注意：我们能做的就是读取，无法设置的哦！

  1. {- window.getComputedStyle的类型 -}
  2. data PseudoElement = ":before" | "::before" | ":after" | "::after" | ":first-line" | "::first-line" | ":first-letter" | "::first-letter" | "::selection" | ":backdrop" | "::backdrop" | Null

window.getComputedStyle :: HTMLElement -> PesudoElement -> CSSStyleDeclaration

  1. {- CSSStyleDeclaration实例的方法 -}
  2. data CSSPropertyName = "float" | "backround-color" | ......
  3. data DOMPropertyName = "cssFloat" | "styleFloat" | "backgroundColor" | ......
  1. -- IE9+的方法
  2. CSSStyleDeclaration#getPropertyValue :: CSSPropertyName -> *
  3. -- IE6~8的方法
  4. CSSStyleDeclaration#getAttribute :: CSSPropertyName -> *
  5. -- 键值对方式获取
  6. CSSStyleDeclaration#[DOMPropertyName] -> *

示例：

  1. .target[title="hello world"]::after{
  2.   display: inline-block;
  3.   content: attr(title);
  4.   background: red;
  5.   text-decoration: underline;
  6. }
  7. const elTarget = document.querySelector(".target")
  8. const computedStyle = window.getComputedStyle(elTarget, "::after")
  9. const content = computedStyle.getPropertyValue("content")
  10. const bg = computedStyle.getAttribute("backgroundColor")
  11. const txtDecoration = computedStyle["text-decoration"]
  12. console.log(content) // "hello world"
  13. console.log(bg)      // red
  14. console.log(txtDecoration) // underline

玩透Content属性

 到这里我们已经可以利用::before和::after实现tooltip等效果了，但其实更为强大的且更需花时间研究的才刚要开始呢！那就是Content属性，不仅仅可以简单直接地设置一个字符串作为伪元素的内容，它还具备一定限度的编程能力，就如上面attr(title)那样，以其附属元素的title特性作为content值。下面请允许我为大家介绍吧！

  1. div::after{
  2.     content: "普通字符串";
  3.     content: attr(父元素的html属性名称);
  4.     content: url(图片、音频、视频等资源的url);
  5.     /* 使用unicode字符集，采用4位16进制编码
  6.      * 但不同的浏览器显示存在差异，而且移动端识别度更差
  7.      */
  8.     content: "\21e0";
  9.     /* content的多个值可以任意组合，各部分通过空格分隔 */
  10.     content: "'" attr(title) "'";
  11.     
  12.     /* 自增计数器，用于插入数字/字母/罗马数字编号
  13.      * counter-reset: [<identifier> <integer>?]+，必选，用于标识自增计数器的作用范围，<identifier>为自定义名称，<integer>为起始编号默认为0。
  14.      * counter-increment: [<identifier> <integer>?]+，用于标识计数器与实际关联的范围，<identifier>为counter-reset中的自定义名称，<integer>为步长默认为1。
  15.      * <list-style-type>: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
  16.      */
  17.     content: counter(<identifier>, <list-style-type>);
  18.     
  19.     /* 以父附属元素的qutoes值作为content的值
  20.      */
  21.     content: open-quote | close-quote | no-open-quote | no-close-quote;
  22. }

换行符：HTML实体为&#010，CSS为\A，JS为\uA。

 可以看到Content接受6种类型，和一种组合方式。其中最后两种比较复杂，我们后面逐一说明。

自定义计数器

 HTML为我们提供ul或ol和li来实现列表，但如果我们希望实现更为可性化的列表，那么该如何处理呢？content属性的counter类型值就能帮到我们。

  1. <!-- HTML 部分-->
  2. .dl
  3.  .dt{chapter1}
  4.  .dd{text11}
  5.  .dd{text12}
  6.  .dt{chapter2}
  7.  .dd{text21}
  8.  
  9. /* CSS部分 */
  10. .dl {
  11.   counter-reset: dt 0; /* 表示解析到.dl时，重置dt计数器为0 */
  12.   
  13.   & .dt {
  14.     counter-reset: dd 0; /* 表示解析到.dt时，重置dd计数器为0 */
  15.     
  16.     &::before{
  17.         counter-increment: dt 1; /* 表示解析到.dt时，dt计数器自增1 */
  18.         content: counter(dt, lower-roman) " ";
  19.     }
  20.   }
  21.   
  22.   & .dd::before {
  23.     counter-increment: dd 1; /* 表示解析到.dd时，dd计数器自增1 */
  24.     content: counter(dd) " ";
  25.   }
  26. }

通过counter-reset来定义和重置计数器，通过counter-increment来增加计数器的值，然后通过counter来决定使用哪个计数器，并指定使用哪种样式。

 如果用JavaScript来表示应该是这样的

  1. const globalCounters = {"__temp":{}}
  2.  
  3. function resetCounter(name, value){
  4.   globalCounters[name] = value
  5. }
  6. function incrementCounter(name, step){
  7.   const oVal = globalCounters[name]
  8.   if (oVal){
  9.     globalCounters[name] = oVal + step
  10.   }
  11.   else{
  12.     globalCounters.__temp[name] = step
  13.   }
  14. }
  15. function counter(name, style){
  16.     return globalCounters[name] || globalCounters.__temp[name]
  17. }
  18.  
  19. function applyCSS(mount){
  20.     const clz = mount.className
  21.     if (clz == "dl"){
  22.         resetCounter("dt", 0)
  23.         const children = mount.children
  24.         for (let i = 0; i < children.length; ++i){
  25.           applyCSS(children[i])
  26.         }
  27.     }
  28.     else if (clz == "dt"){
  29.         resetCounter("dd", 0)
  30.         incrementCounter("dt", 1)
  31.         const elAsBefore = document.createElement("span")
  32.         elAsBefore.textContent = counter("dt", "lower-roman") + " "
  33.         mount.insertBefore(mount.firstChild)
  34.     }
  35.     else if (clz == "dd"){
  36.         incrementCounter("dd", 1)
  37.         const elAsBefore = document.createElement("span")
  38.         elAsBefore.textContent = counter("dd", "lower-roman") + " "
  39.         mount.insertBefore(mount.firstChild)
  40.     }
  41. }

嵌套计数器

 对于多层嵌套计数器我们可以使用counters(<identifier>, <separator>, <list-style-type>?)

  1. .ol
  2.   .li
  3.     .ol
  4.       .li{a}
  5.       .li{b}
  6.   .li
  7.     .ol
  8.       .li{c}
  9. .ol {
  10.     counter-reset: ol;
  11.     & .li::before {
  12.         counter-increment: ol;
  13.         content: counters(ol, ".");
  14.     }
  15. }

Content的限制

1.IE8+才支持Content属性；

2.除了Opera9.5+中所有元素均支持外，其他浏览器仅能用于:before,:after内使用；

3.无法通过JS获取Counter和Counters的运算结果。得到的就只能是"counter(mycouonter) \" \""。

自定义引号

 引号这个平时很少在意的符号，其实在不同的文化中使用的引号将不尽相同，如简体中文地区使用的""，而日本则使用「」。那我们根据需求自定义引号呢？答案是肯定的。

 通过open-quote,close-quote,no-open-quote和no-close-quote即可实现，下面我们通过例子来理解。

 <q>会根据父元素的lang属性自动创建::before和::after来实现插入quotation marks。

  1. p[lang=en]>q{英语}
  2. p[lang=no]>q{挪威语}
  3. p[lang=zh]>q{汉语}
  4. p[lang=en]>q.no-quote{英语2}
  5. div[lang=no]>.quote{挪威语2}

CSS片段：

  1. p[lang=en] > q{
  2.   quotes: "<!--" "-->"; /* 定义引号 */
  3. }
  4. p[lang=en] > q.no-quote::before{
  5.   content: no-open-quote;
  6.   /*或者 content: none;*/
  7. }
  8. div[lang=no] > .quote {
  9.   quotes: "<<-" "->>";
  10. }
  11. div[lang=no] > .quote::before {
  12.   content: open-quote;
  13. }
  14. div[lang=no] > .quote::after {
  15.   content: close-quote;
  16. }

示例

分割线 

  1. p.sep{or}
  2. .sep {
  3.   position: relative;
  4.   text-align: center;
  5.   
  6.   &::before,
  7.   &::after {
  8.     content: "";
  9.     box-sizing: border-box;
  10.     height: 1px;
  11.     width: 50%;
  12.     border-left: 3em solid transparent;
  13.     border-right: 3em solid transparent;
  14.     position: absolute;
  15.     top: 50%;
  16.   }
  17.   
  18.   &::before {
  19.     left: 0;
  20.   }
  21.   
  22.   &::after {
  23.     right: 0;
  24.   }
  25. }

只读效果(通过遮罩原来的元素实现)

  1. .input-group {
  2.   position: relative;
  3.   
  4.   &.readonly::before {
  5.     content: "";
  6.     position: absolute;
  7.     width: 100%;
  8.     height: 100%;
  9.     top: 0;
  10.     left: 0;
  11.   }
  12. }

计数器 

  1. .selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}
  2. .selection-count
  3. .selections{
  4.   counter-reset: selection-count;
  5.   
  6.   & input:checked {
  7.     counter-increment: selection-count;
  8.   }
  9. }
  10. .selection-count::before {
  11.   content: counter(selection-count);
  12. }

参考

http://www.wozhuye.com/compatible/297.html https://dev.opera.com/articles/css-generated-content-techniques/

总结

以上所述是小编给大家介绍的CSS 伪元素及Content 属性 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号