定义和用法

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. bootstrap-table使用stickyHeader固定表头时，表头不跟随表体水平滚动问题解决

    解决方法: onAll: function () { // 修复stickyHeader表头不跟随表体水平滚动的问题 if (params.stickyHeader) { var fixedTable ...

  2. vue 概念与使用vue-cli脚手架快速构建项目

    vue 定义:是一套构建用户界面的渐进式框架,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合. 数据渲染机制: 核心: 响应式数据绑定 ...

  3. 【leetcode】712. Minimum ASCII Delete Sum for Two Strings

    题目如下: 解题思路:本题和[leetcode]583. Delete Operation for Two Strings 类似,区别在于word1[i] != word2[j]的时候,是删除word ...

  4. 一个能极大提高生产率的Chrome新建标签页扩展

    我是一个对开发生产率有着BT需求的程序员,总是追求将自己的单位时间生产率最大化. 通过分析,我发现自己一天会反反复复使用Chrome的新建标签,然后访问常用的网站.因此,我期望新建一个默认的Chrom ...

  5. Spring动态数据源-AbstractRoutingDataSource

    在分库分表的情况下,在执行SQL时选择连接不同的数据源(库)的思路:配置多个数据源加到动态数据源对象中,根据实际的情况动态切换到相应的数据源中. 如存放订单信息的有10个库,每个库中有100张表,根据 ...

  6. python线程池示例

    使用with方式创建线程池,任务执行完毕之后,会自动关闭资源 , 否则就需要手动关闭线程池资源  import threading, time from concurrent.futures impo ...

  7. UIWebView和WKWebView一些琐事

    WebViewJavascriptBridge 1.load加载 ,去本地查找html路径方式 NSString* htmlPath = [[NSBundle mainBundle] pathForR ...

  8. VS2017 IDE 说明

  9. 匈牙利算法&模板O（mn）HDU2063

    #include<cstdio> #include<cstring> #define maxn 510 using namespace std; int k,g,b,x,y,a ...

  10. 「PHP开发APP接口实战009」日常安全防范之防SQL入和XSS攻击

    防SQL注入和XSS攻击通用过滤 首先在 /app/library/ 目录下创建 Security.php 文件并添加以下代码: <?php /** * * 防SQL注入和XSS攻击通用过滤 * ...