Question

是否有选择器指定仅在匹配特定URL或部分URL时应用的CSS？

例如，这是我的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网址上时，我希望应用about.html。

CSS媒体查询允许您在视图宽度更改时切换到另一组样式。当用户要在屏幕上查看或将其发送到打印机时，它还允许您指定一组不同的样式。

我的问题是，“是否可以根据URL中的URL或值指定不同的样式集。”所以这不是一个如何做我要问的问题，而是如果可能的话。

我正在使用CMS，它有一个主题，允许您添加自己的CSS。有一个样式表。而已。不是两个而是一个。

我有一个页面具有该页面的特定CSS，只有该页面。这是这个问题的起源。可能有一千种解决方法，但我的问题不在于解决方法。

Answer 1

看起来@document规则仅针对此案例提出，但它已从CSS3规范中删除并计划用于CSS4。从我的测试来看，它似乎不受支持，并且在发布时它未在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的TIL感谢@BoltClock

更多info

Answer 2

令人遗憾的是，没有伪类可以根据URL选择元素。唯一的方法是将类添加到body标签或特定元素，然后覆盖CSS。

Answer 3

如果仅用于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：

添加您的主题函数。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' );

在匹配URL中的特定值时是否应用了一个CSS选择器？

3 个答案: