是否可以仅使用CSS选择基于当前页面的元素？ [英] Is it possible to select an element based on the current page using only CSS?

问题描述

考虑到我有一个单一的css文件为我的整个网站（这样做是一个通常的技术），我想知道是否有一种方法来选择网站范围的属性，如 body



类似

（或其他任何属性）

  body：in（'index.html'）{
 some properties; 
} 
 
 body：in（'contact.html'）{
其他属性; 
} 
  

我知道使用像php，js，jquery ...这样的简单解决方案。

解决方案

选择器没有关于文档的信息在DOM树中显示，并且DOM不根据其文件名，URL或任何其他此类属性来公开页面的信息。

历史上有一个 @document at-rule用于查询当前网址，但已从条件规则第3级模块。最可能的原因是缺乏跨供应商实现，因为Gecko中存在唯一已知的实现，因为 @ - moz-document 。这太糟糕了，你在野外发现的唯一用途是不是应用基于某个页面的CSS，而只是作为Firefox的CSS黑客。

$正如你所说的，最简单的解决方法是让每个页面对 html 或<$ c应用一个唯一的类$ c> body 元素，并根据该类选择，无论是通过硬编码还是动态。

considering I have a single css file for my entire website (and that doing so is an usual technique), I was wondering if there is a way to select website-wide attributes like body (or any other attribute in fact) according to the current page using only css.

Something like

body:in('index.html') {
    some properties;
}

body:in('contact.html') {
    other properties;
}

Again, css only. I know the simple solutions using things like php, js, jquery...

解决方案

Selectors have no information about the document beyond what is presented in the DOM tree, and the DOM does not expose information about the page according to its file name, URL, or any other such properties.

Historically there was a @document at-rule for querying the current URL, but it was removed from the Conditional Rules Level 3 module. The most likely reason for this is the lack of cross-vendor implementations, as the only known implementation exists in Gecko, as @-moz-document. It's so bad, that the only uses for it that you'll spot in the wild are not to apply CSS based on a certain page, but solely as a CSS hack for Firefox.

As you've stated, the simplest workaround for this is to have each page apply a unique class to the html or body element and select according to that class, whether via hardcoding, or dynamically.

这篇关于是否可以仅使用CSS选择基于当前页面的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！