在匹配URL中的特定值时，是否有CSS选择器？

l0oc07j2 于 2023-10-21 发布在其他

关注(0)|答案(6)|浏览(145)

是否有一个选择器指定CSS仅在匹配特定URL或URL的一部分时应用？
例如，下面是我的CSS样式表：

p {
   color: green;
}

url("home.html") {
   color: blue;
}

url("about.html") {
   color: yellow;
}

path("/path/index*") {
   color: indigo;
}

当用户访问home.html时，我希望应用home.html选择器。当我在about.html URL上时，我希望应用about.html。
CSS媒体查询允许您在视图宽度更改时切换到不同的样式集。它还允许您在用户要在屏幕上查看或将其发送到打印机时指定一组不同的样式。
我的问题是，“是否有可能根据URL或URL中的值指定一组不同的样式。”所以这不是一个如何做的问题，而是一个是否可能的问题。
我使用的是CMS，它有一个主题，允许您添加自己的CSS。有一种风格。就这样。不是两个而是一个。
我有一个页面，有特定的CSS到该页面，只有该页面。这就是这个问题的由来。可能有一千种变通方法，但我的问题不是关于变通方法。
然而，既然这个问题已经得到了回答，我不介意变通一下与这个问题相关的答案。

css

来源：https://stackoverflow.com/questions/45727055/is-there-a-css-selector-that-applies-when-matching-specific-values-in-the-url

6条答案

按热度按时间

8fsztsew1#

看起来@document规则只是针对这种情况提出的，但它已从CSS3规范中删除，并计划用于CSS 4。从我的测试来看，它似乎不受支持，而且在本文发布时也没有在caniuse上列出。
其语法如下：

@document url("http://www.example.com/widgets/") {
  body {
    color: white;
    background: tomato;
  }
}
/* The above applies styles only to the page at the given URL  */

@document url-prefix("http://www.example.com/widgets/") {
  /* 
  Styles written here are applied to all URLs that 
  begin with 'http://www.example.com/widgets/'  
  */
}

@document regexp("https:.*") {
  /* Styles written here are applied to all URLs that begin with 'https:' */
}

使用**@media**查询进行比较的测试代码：

var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("@media (min-width:600px) { html {color:red}}", 0);
console.log(document.styleSheets.length);

结果如下：

// no errors, stylesheet is added

测试代码测试**@document**规则：

var styleTag = document.createElement ("style");
document.head.appendChild (styleTag);
var sheet = styleTag.sheet;
sheet.insertRule ("@document url('http://www.google.com') { html {color:red}}", 0);

结果如下：

/*
Exception: SyntaxError: An invalid or illegal string was specified
@Scratchpad/3:4:0
*/

关于@document感谢@BoltClock
更多info

赞(0）回复(0）举报 2023-10-21

dwbf0jvd2#

您可以在HTML中或使用JavaScript将data-url自定义属性附加到元素的祖先，然后在CSS中查询该数据的值。下面是一个工作示例，其中data-url属性位于body元素上：

const navigator = document.getElementById('navigator')
const blogUrl = 'https://mywebsite.com/blog';
const aboutUrl = 'https://mywebsite.com/about'

navigator.onclick = () => {
  document.body.dataset.url = document.body.dataset.url === blogUrl ? aboutUrl : blogUrl
};

body::before {
  content: "Current url: " attr(data-url);
}

body[data-url*="blog"] .url-based {
  background-color: red;
}

body[data-url*="blog"] .url-based::after {
  content: "You're on the blog page!"
}

.url-based::after {
  content: "You're not on the blog page."
}

#navigator {
  display: block;
  margin-top: 10px;
}

.box {
  border: 2px solid black;
  padding: 20px;
  margin-top: 5px;
}

<body data-url="https://mywebsite.com/blog">
  <button id="navigator" type="button">Navigate</button>
  <div class="box url-based"></div>
  <div class="box not-url-based">My styling is not based on the current url.</div>
</body>

不知道这样的解决方案会有多好用。

赞(0）回复(0）举报 2023-10-21

lawou6xi3#

可悲的是，没有伪类来选择基于URL的元素。唯一的方法是将class添加到body标签或特定元素，然后覆盖CSS。

赞(0）回复(0）举报 2023-10-21

ecr0jaav4#

如果只是HTML，使用jQuery

<script>
        var currentLocation = window.location.pathname;

        if (currentLocation == 'home.html'){
        $('head').append('<link href="home-style.css" rel="stylesheet">');
        } else if (currentLocation == 'about.html'){
        $('head').append('<link href="about-style.css" rel="stylesheet">');
        } else {
        $('head').append('<link href="index-style.css" rel="stylesheet">');
        }
    </script>

如果使用WordPress：

添加主题function.php

function site_stil_script() {
    
    if ($_SERVER['REQUEST_URI']=='/YOURPAGE/') {
        wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-difrent-style.css', array(), '20120208', 'all' );
    } else {
        wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/assets/css/theme-style.css', array(), '20120208', 'all' );
    }
//other lines....
}
add_action( 'wp_enqueue_scripts', 'site_stil_script' );

赞(0）回复(0）举报 2023-10-21

mwecs4sa5#

目前，:has()有相当广泛的支持，但可能还没有高到可以无条件推出的程度。希望Firefox很快就能支持它，并且v105之前的Chrome的使用率会下降。参见Can I use...和https://bugzilla.mozilla.org/show_bug.cgi?id=418039。
不是所有的网页都会有这个，但在<head>中包含URL的东西是相当常见的，例如：

<link rel="canonical" href>
<meta property="og:url" content>
<meta itemprop="url" content>
<meta name="twitter:url" content>

把其中一个和:has()放在一起，你可以写这样的选择器：

/* URL ends with "/home.html" */
head:has(link[rel="canonical"][href$="/home.html"]) + body p

/* URL contains "/path/" */
head:has(link[rel="canonical"][href*="/path/"]) + body p

$=和*=：attribute selectors
+：next-sibling combinator

赞(0）回复(0）举报 2023-10-21

kknvjkwl6#

太棒了！
对于我的用例，这可以通过：target css伪类实现
https://www.w3schools.com/cssref/sel_target.php

<a href="#someid">link to current page (ends up in url after #)</a>
<div id="someid">target of previous link</div>

<style>
    #someid:target {
        background-color: green;
    }
</style>

但是对于您的使用情况，您需要在您的URL中添加以下内容：About.html#关于家.html#家

赞(0）回复(0）举报 2023-10-21

我来回答

在匹配URL中的特定值时，是否有CSS选择器？

6条答案

相关问题

热门标签

最新问答