以某种方式使用CSS引用哈希值

Somehow reference the hash value using CSS

本文关键字：CSS 引用 哈希值 方式使      更新时间：2023-09-26

假设我有一个使用location.hash来存储页面信息的页面，我的大多数访问者使用js，所以没有问题。是否有一种方法可以使用CSS链接到具有相同值的非js版本(使用location.search代替)?

想象:

<noscript>Use this page instead</noscript>
<textarea></textarea>
<input id="save" type="checkbox" value="save">
<input id="run" type="checkbox" value="run">

JS: 

$(document).ready( function() { $('textarea').val( unescape(location.hash) ) } );
$('#save').click(function() { location.hash = escape($('textarea').val()) });
$('#run').click(function() { /* Mess around with the DOM */ });

我在想:

noscript:after {
    content: full url with hash with a ? instead of a #
}

我意识到，如果我使用location.search我不会有问题，但我想要的页面是可用的人与JS甚至离线。

我尝试了背景图像URL，但忽略了当前的页面名称。我需要一些CSS，可以访问当前的URL在它的全部

你不能在样式表中访问当前页面的URL。

你可以走的最远的是CSS3的:target选择器上的一个元素，你可以应用内容样式(绝对不是input)，和attr(id)获得ID的值，如果它的ID是相同的URL哈希片段。还有一个硬编码的字符串，表示页面URL(它可能在带有<style>标签的内部样式表中工作…):

/*
If the hash is #save, select [id="save"]
and make its ::after content 'http://example.com/?' followed by its ID.
*/
:target::after { content: 'http://example.com/?' attr(id); }

您不能使用attr()函数来获取一个元素的ID并将其放在另一个元素中，顺便说一下，这就是为什么我说您不能在input元素上使用它。

相关文章：