CSS 属性选择器:如何转义属性值中的换行符?

2023-11-22

我有一个链接href其值中包含回车符的属性(HTML 无法更改):

<a href="
    http://google.com
">Testing</a> 

我最初认为反斜杠在字符串内部使用时可以用来转义回车符(U+000D),但后来在 CSS 规范中读到了这一点:

任意字符(十六进制数字、换行符、回车符或换页符除外) 可以用反斜杠转义以删除其特殊含义。例如,“\””是由一个双引号组成的字符串。

这可能吗?我尝试过使用\a and \n也没有任何运气。

http://jsfiddle.net/AHuvh/1/


您拥有的选择器不起作用的原因:

a[href="\
    http://google.com\
"]

是因为:

首先,在字符串内部,反斜杠后跟换行符将被忽略(即,该字符串被视为不包含反斜杠或换行符)。在字符串之外,反斜杠后跟换行符代表其自身(即 DELIM 后跟换行符)。

这在您引用的上一段中提到过第4.1.3节,以及为什么它说换行符是不能用反斜杠转义的字符之一。

这使得它等效于以下选择器:

a[href="    http://google.com"]

仅当其属性值不包含任何换行符时,它才会与您的元素匹配。

也就是说,它is事实上可以通过包含换行符的属性值来匹配元素。然而,CSS 让这变得有点复杂:

  1. 要在 CSS 字符串中表示换行符,您需要使用\a转义序列(不区分大小写,最多 6 个十六进制数字)。这在第4.3.7节, 在字符串上(无论是在属性值还是属性选择器中,它们的处理方式相同):

    字符串不能直接包含换行符。要在字符串中包含换行符,请使用表示 ISO-10646 (U+000A) 中的换行符的转义符,例如“\A”或“\00000a”。该字符代表 CSS 中“换行符”的通用概念。

    \n在 CSS 中没有特殊含义;事实上,它是一样的n.

  2. 如果空格直接跟在转义序列后面,例如\a,该空格必须加倍,以便可以消耗紧随转义序列的空格字符。再次参见第 4.1.3 节,其中指出:

    十六进制转义后仅忽略一个空白字符。请注意,这意味着转义序列后面的“真实”空格必须加倍。

    这可能就是为什么你无法让它工作,即使\a。可以理解的是,这是一个令人难以置信的模糊规则,尤其是在处理空白字符时。

这会产生以下选择器,正确应用样式:

a[href="\a     http://google.com\a"]

请注意,有five第一个之间有空格字符\a和 URL,而相比之下,HTML 中的换行符后面只有四个空格。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 属性选择器:如何转义属性值中的换行符? 的相关文章

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • CSS - 最大宽度和椭圆

    我有一个包含文本的跨度 我希望跨度扩大到最大 500px 以容纳里面的文本 达到最大值后 我希望文本为任何溢出最大宽度的文本显示省略号 这可能吗 我尝试了以下方法 但这并没有达到目的 Thanks position absolute top
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc
  • 将图像原始尺寸保留在较小的 div 内

    我有一个 600x400px 的图像 并希望将其放在尺寸为 240x200px 的较小 div 内 但图像缩小或扭曲 我希望原始尺寸的图像集中在较小的 div 中 这会隐藏一些图像 我编写了这个 CSS 规则来应用于不同的图像尺寸 theB
  • iPhone 地址栏阻止了 HTML 页面标题按钮?

    我有一个带有两个标题按钮的移动网站 在 iPhone 上的纵向模式下 效果很好 我可以按按钮 问题是这样的 当我切换到纵向模式并尝试点击按钮时 本机 iPhone 地址栏就会显示 它位于标题上方 因此我无法按按钮 图片显示了问题 按一个按钮
  • Google 字体(上面有空格)无法在 IE7/IE8 上呈现

    有谁知道为什么 IE7 IE8 不会渲染 Google 字体 如果名称上有空格 您可以在这里查看演示 http jsfiddle net fYzAb 1 http jsfiddle net fYzAb 1 完全相同的两个标签 一个使用 Os
  • 如何将 ng-repeat 分成批次

    我正在做这个 ref checkbox 示例http getbootstrap com javascript buttons examples http getbootstrap com javascript buttons example
  • 在聚合物元素中动态注入共享样式(聚合物1.2.3)

    我确实有几个自己创建的嵌套聚合物元素 目前 通过使用聚合物共享样式 我可以将自定义样式注入其他元素 不幸的是 这种方法仅限于静态使用 因此 在实现时 我确实需要通过导入共享样式模块来知道哪个元素应该使用哪种共享样式 and 但在我的用例中
  • Sitecore 多种 RTE 类样式

    我可以为 RichTextEditor RTE 添加 CSS 样式路径 如下所示 并且我可以在 RTE 中选择定义的样式
  • height:100% 在 Internet Explorer 中不起作用

    我有一个关于 CSS 属性的问题height 100 在 Internet Explorer 中 height 100 在 IE 中不起作用 但在 Firefox 和 Chrome 中可以 HTML 文件 div ul ul div
  • BS3 - img 响应类 - 为什么没有最大高度?

    引导程序 3 包括 img responsive班级 应用这些 css 设置 display block height auto max width 100 为什么没有max height 100 我发现添加这个使得图片的高度也适合 但我不
  • ng-show 令人不安的 div 布局 - angularJS

    我在用ng show notesOpened 如果notesOpened 变量为true 则隐藏div 然而 当隐藏时 它会扰乱布局 有没有办法让 ng show 的行为与 css 属性相同visibility hidden 以便被隐藏的
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • CodeIgniter 中的 base_url() 和 403 错误

    在 HTML 视图中 css 链接代码如下所示 但我的浏览器显示的地址具有双域地址 www jedendzien pl www jedendzien pl assets css style css 所以我收到 403 错误 我通过以下方式创
  • 如何在对角线元素上创建 CSS 边框

    这是一个例子 http jsfiddle net 52c7t http jsfiddle net 52c7t Simply 我试图让 div 位于右侧 并具有像左侧 div 一样的边框 我希望边框位于右侧 div 的左侧 我尝试了一百万种不
  • CSS悬停边框而不调整图像大小

    我想问一下 在不调整图像大小的情况下 我的悬停边框下方功能做错了什么 我已按照给出的指南进行操作here https css tricks com image rollover borders that do not change layo
  • 如何选择带有空格的类

    我如何选择一个类class boolean optional 我已经尝试过这个 boolean optional CSS boolean optional CSS 正如 Zepplock 所说 这实际上是一个属性中的两个类 boolean
  • 四列布局,无需媒体查询即可转换为单列

    我正在尝试创建一个四列布局 其中每列随着窗口的大小而增大和缩小 但每列都有最小宽度 当窗口太小而无法将所有四列放入单行时 它会转换到单个列 每个部分占据整个宽度 我无法使用 flex box 或 CSS 网格来做到这一点 我想在没有媒体查询
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt
  • Twitter bootstrap 3 RC2 - IE8 中的导航不起作用

    我正在使用 Twitter Bootstrap 3 RC2 在页面顶部创建一个导航栏 除了在 IE8 中之外 该导航栏工作正常 在 IE8 中 就像浏览器变小一样 因此菜单会折叠以供移动视图使用 但这种情况并非如此 现在我知道 TB3 仍在

随机推荐

  • ExtJs4 - 与网格 ColumnModel 等效的是什么?

    ExtJs3相当于什么Ext grid ColumnModel在 ExtJs4 中 我想做的是隐藏一列 我在 ExtJs3 中做了如下操作 grid colModel setHidden 1 true 您可以使用 Ext grid colu
  • 查找非有限值的最快方法

    这是受到以下启发 python numpy 中的组合掩码 任务是创建一个包含所有非有限值的布尔数组 例如 gt gt gt arr np array 0 2 np inf np inf np nan gt gt gt np isfinite
  • 使用 EventTrigger 设置属性

    我希望能够使用 EventTrigger 设置属性 但这有很多问题 1 EventTriggers仅支持Actions 所以我必须使用storyBoard来设置我的属性 2 一旦我使用故事板 我有两个选择 停止 动画停止后 值将恢复到动画开
  • git log -L 不带差异

    我正在尝试使用git log L
  • 使用 Ruby 进行科学编程

    我正在使用 python 或 Octave 进行数学计算 因为手头有非常好的函数和库 但最近我对 Ruby 产生了兴趣 我想知道 Ruby 中是否有相当于 Python 中的 numpy scipy 的科学编程工具 具体来说 我正在寻找一些
  • 选择页面上的所有元素[关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我正在寻找 javascript 中的一个函数 它可以单击我页面上的每个元素 链接 按钮
  • 将指针传递给结构数组时出错

    include
  • Bootstrap 多选不起作用

    我正在尝试使用多选 Bootstrap 我使用了以下代码 该代码也可以在他们的网站上找到 http davidstutz github io bootstrap multiselect 它显示了多选按钮 并且由于我已经选择了 奶酪和意大利辣
  • 没有 ControlContainer 的提供者和 ControlContainer 没有提供者

    我正在开发一个使用 Angular2 的应用程序 我正在尝试在我的应用程序中使用反应式表单 但遇到了一些错误 第一个错误是关于 NgControl 的 如下所示 没有 NgControl 的提供者 div 类 col md 8 错误 gt
  • C++ sizeof Vector 是 24?

    我只是在闲逛并学习向量和结构 有一次 我尝试以字节为单位输出向量的大小 这是代码 include
  • Android Gradle 插件 0.13 和 android-apt 1.3 出现错误

    我刚刚将我的 android gradle 插件从 0 12 更新到 0 13 而且我已经下载了gradle 2 1 然后 我尝试使用 beta 版的 android studio 0 8 9 但根据http tools android c
  • 抑制 Visual Studio 输出窗格的输出 (C++)

    当我在 Visual Studio 调试器中运行 Win32 项目时 我得到了大量关于加载了哪些 DLL 第一次机会异常等信息 有没有办法可以抑制这个输出 有一天 我可能想知道 C Windows SysWOW64 ntdll dll 何时
  • 如何获取 Android 手机所有者的名字和姓氏?

    有没有办法获取 Android 手机所有者的名字和姓氏 我在网上搜索过 但没有运气 我偶然发现thisStackoverlow 中的问题 但这正在获取所有联系人的名字和姓氏 我需要的只是获取所有者的名字和姓氏 我认为这仅适用于 ICS 及以
  • Python 社交身份验证 NotAllowedToDisconnect 位于 /disconnect/facebook/1/

    我正在尝试在 Django 应用程序中将注销与 Python Social Auth 一起使用 但我得到了 NotAllowedToDisconnect at disconnect facebook 1 这些是我的设置 SOCIAL AUT
  • 什么是基于文件的数据库?

    我参加了有关关系数据库的课程 我被要求研究基于文件的方法与关系数据库相比的优势 我发现理解关系数据库更容易 但理解基于文件的系统却很困难 基于文件的系统是否与在 Windows 分层系统上存储文件相同 即存储在文件夹和目录下的文本文件 纯
  • Reactjs删除拼写检查属性

    我正在使用 ReactJS 来渲染我的 DOM 我想添加spellcheck false 文本输入上的属性 所以我这样做 render return div div
  • 检查是否启用第三方cookie

    我有一个应用程序需要检查客户端浏览器是否启用了第三方 cookie 有谁知道如何在 JavaScript 中做到这一点 技术背景 第三方通过 HTTP 不是 JavaScript 设置和读取 cookie 因此 我们需要向外部域发送两个请求
  • UTF8工作流程PHP、MySQL总结[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我正在为拥有不同字母表的国际客户工作 因此我试图最终了解 PHP 和 MySQL
  • 在R中的文本文件中搜索字符串[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 是否有 R 函数可以在文本文件中搜索 s 字符串 像 unix grep 之类的东西 我想另一种选择是逐行读取文件 但想知道这样的函数是否可以绕过它
  • CSS 属性选择器:如何转义属性值中的换行符?

    我有一个链接href其值中包含回车符的属性 HTML 无法更改 a href Testing a 我最初认为反斜杠在字符串内部使用时可以用来转义回车符 U 000D 但后来在 CSS 规范中读到了这一点 任意字符 十六进制数字 换行符 回车