• CSS中quotes属性以及content的open(close)-quotes属性


    定义和用法

    quotes 属性设置嵌套引用(embedded quotation)的引号类型。

    可能的值

    描述
    none 规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。
    string string string string

    定义要使用的引号。

    前两个值规定第一级引用嵌套,后两个值规定下一级引号嵌套。

    inherit 规定应该从父元素继承 quotes 属性的值。

    例子

    <html lang="en">
    <head>
    <style type="text/css">
    //quotes结合<q>标签使用
    q:lang(en)//:lang选择器用于选取带有以指定值开头的 lang 属性的元素。
    {
    quotes: '"' '"' "'" "'"
    }
    </style>
    </head>
    <body>
    
    <p><q>This is a <q>big</q> quote.</q></p>
    </body>
    </html>

    输出:

    未使用quotes属性输出效果:

     quotes属性结合content:open-quote、close-quote属性使用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
          .ask {
            quotes: '提问: "' '"';
          }
          .answer {
            quotes: '回答: "' '"';
          }
          .ask:before,
          .answer:before {
              content: open-quote;
          }
          .ask:after,
          .answer:after {
              content: close-quote;
          }
        </style>
    </head>
    <body>   
    <p class="ask">你问我爱你有多深?</p>
    <p class="answer">月亮代表我的心</p>
    </body>
    </html>

    输出结果:

     取消quotes属性使用

    <head>
        <meta charset="UTF-8">
        <title>content生成技术</title>
        <style type="text/css">
          /*.ask {
            quotes: '提问: "' '"';
          }
          .answer {
            quotes: '回答: "' '"';
          }*/
          .ask:before,
          .answer:before {
              content: open-quote;
          }
          .ask:after,
          .answer:after {
              content: close-quote;
          }
        </style>
    </head>
    <body>   
    <p class="ask">你问我爱你有多深?</p>
    <p class="answer">月亮代表我的心</p>
    </body>

    输出结果:

  • 相关阅读:
    当Java遇到XML 的邂逅+dom4j
    idea集成项目管理工具 --- Maven 并且【配置tomcat】
    C#连接操作MySQL数据库详细步骤 帮助类等(二次改进版)
    MySQL 中国省市区SQL表数据
    LeetCode-28. 实现 strStr()
    LeetCode-66 加一
    头插法将单链表原地逆转
    LeetCode:27 移除元素
    LeetCode:26删除有序数组中相同的数.(Python3)
    LeetCode-21 有序链表的合并
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/11822078.html
Copyright © 2020-2023  润新知