定义和用法

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>

输出结果：

CSS中quotes属性以及content的open（close）-quotes属性的更多相关文章

  1. CSS中font-size、font-family、line-height顺序以及简写属性

    顺序: font-size       line-height       font-family body { font-size: 12px}; h1 { font: bold 200%/1.2 ...

  2. CSS中文本继承情况

    无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html   vertical-align:  垂直文本对齐   CSS中文本可以继承父级样式   体 ...

  3. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

  4. 盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

  5. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  6. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  7. css中伪元素before或after中content的特殊用法attr【转】

    [原文]https://segmentfault.com/a/1190000002750033 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在 ...

  8. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  9. css中的一些属性解析

    1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解 ...

随机推荐

  1. 查看Linux系统所对应的版本

    #cat /etc/issue 在CentOS下执行显示为:CentOS release 5.7 (Final)Kernel \r on an \m 或在Ubuntu下显示为:Ubuntu 11.04 ...

  2. [python 学习] lambda

    #!/usr/bin/python # -*- encoding:utf-8 -*- # lambda parameter_list: expression f = lambda x,y: x + y ...

  3. Spring中都用到了哪些设计模式

    JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是千篇一律,而且大部分都年代久远.所以,花了 ...

  4. Python---编辑器安装和print函数

    Python---编辑器安装和print函数 -------------------------------------------------------- 一.Python是什么? Python是 ...

  5. Promise和async/await

    1.promise对象 promise 对象有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).promise 对象的状态改变,只有两种可能:从 pend ...

  6. codeforces_D. Treasure Hunting_[DP+Binary Search]

    http://codeforces.com/contest/1201/problem/D 题意:n行m列的矩阵中,有k个targets,从[1, 1]出发,每次只能向上下左右四个方向移动一步,且只有在 ...

  7. 字符串（二）：string

    字符串使用方法整理 系列: 字符串(一):char 数组 字符串(二):string string 是 C++ STL 的一个字符串类型,原型是 vector<char> 并对字符串处理做 ...

  8. laravel5.6 常规框架部署和配置文件说明

    示例demo文件位置: 入口默认index.php文件地址: 例如: /laravel5.6/public/index.php (1) 必须先初始化路由web.php文件地址: 例如: /larave ...

  9. PHP RSA公私钥的理解和示例说明

    1.生成公钥和私钥 要应用RSA算法,必须先生成公钥和私钥,公钥和私钥的生成可以借助openssl工具.也可以用在线生成公私钥.(网站:http://web.chacuo.net/netrsakeyp ...

  10. MySQL5.7.21报错：[Err] 1055

    [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c ...