定义和用法

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

可能的值

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

定义要使用的引号。

前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。
inherit 规定应该从父元素继承 quotes 属性的值。

例子

  1. <html lang="en">
  2. <head>
  3. <style type="text/css">
  4. //quotes结合<q>标签使用
  5. q:lang(en)//:lang选择器用于选取带有以指定值开头的 lang 属性的元素。
  6. {
  7. quotes: '"' '"' "'" "'"
  8. }
  9. </style>
  10. </head>
  11. <body>
  12.  
  13. <p><q>This is a <q>big</q> quote.</q></p>
  14. </body>
  15. </html>

输出：

未使用quotes属性输出效果：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.       .ask {
  8.         quotes: '提问: "' '"';
  9.       }
  10.       .answer {
  11.         quotes: '回答: "' '"';
  12.       }
  13.       .ask:before,
  14.       .answer:before {
  15.           content: open-quote;
  16.       }
  17.       .ask:after,
  18.       .answer:after {
  19.           content: close-quote;
  20.       }
  21.     </style>
  22. </head>
  23. <body>
  24. <p class="ask">你问我爱你有多深?</p>
  25. <p class="answer">月亮代表我的心</p>
  26. </body>
  27. </html>

输出结果：

取消quotes属性使用

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>content生成技术</title>
  4.     <style type="text/css">
  5.       /*.ask {
  6.         quotes: '提问: "' '"';
  7.       }
  8.       .answer {
  9.         quotes: '回答: "' '"';
  10.       }*/
  11.       .ask:before,
  12.       .answer:before {
  13.           content: open-quote;
  14.       }
  15.       .ask:after,
  16.       .answer:after {
  17.           content: close-quote;
  18.       }
  19.     </style>
  20. </head>
  21. <body>
  22. <p class="ask">你问我爱你有多深?</p>
  23. <p class="answer">月亮代表我的心</p>
  24. </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. c++函数参数或返回值为函数指针

    C++中函数指针的形式为:返回值类型 + 参数类型,函数没有值类型,但是却可以声明函数的指针,因为函数是可寻址的,存放在内存中的代码段,可以从指针访问. 函数指针可以声明为: void (*pF)(v ...

  2. TS中补充的六个类型

    1.  元组 元组可以看做是数组的拓展,它表示已知元素数量和类型的数组.确切地说,是已知数组中每一个位置上的元素的类型 当我们为 元组 赋值时:各个位置上的元素类型都要对应,元素个数也要一致. let ...

  3. bzoj4448 [Scoi2015]情报传递 主席树+树上差分

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4448 题解 练习一下主席树的基础练习题找回感觉. 对于每一次询问,第一问显然随便做. 第二问的 ...

  4. Linux必备软件安装

    若想Linux体验感更强,安装linux著名的KDE界面 (里面可以配置很多个性化的界面,特效等) # apt install plasma-desktop mpv ---很炫酷的视频播放器okula ...

  5. swan.onPageNotFound

    解释: 监听小程序要打开的页面不存在事件.该事件与 App.onPageNotFound 的回调时机一致. 方法参数: Function callback小程序要打开的页面不存在的事件回调函数. ca ...

  6. Milking Grid poj2185

    Milking Grid POJ - 2185 时限: 3000MS   内存: 65536KB   64位IO格式: %I64d & %I64u 提交 状态 已开启划词翻译 问题描述 Eve ...

  7. PHP 判断是否为手机端访问

    /* * 判断是否为手机端 */function check_wap(){ // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_W ...

  8. 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...

  9. day37—javascript对表格table的操作应用（二）

    转行学开发,代码100天——2018-04-22 昨天学习了JavaScript对table的基本操作,包括表格的创建,表格元素的获取,隔行换色及鼠标动作等.今天主要学习table的搜索查询及排序操作 ...

  10. day24—JavaScript实现导航栏底部引线跟随移动

    转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...