Question

CSS中是否可以使用另一个选择器属性更改选择器属性？

例如，使用.button:focus我想改变身体的背景，如下所示：

body {
  background-image: url(../images/banana.jpg);
  transition: background-image 2s;
}

.button:focus, body {
  background-image: url(../images/apple.jpg)<-- but I just want to change the background of the body, not from the button also
  transition: background-image 2s;
}

Answer 1

您希望使用JavaScript来实现这一点，或者使用高效的CSS级联选择器，但是在您编写时它不会自下而上。

Answer 2

你可以使用Jquery。因为使用Jquery你可以通过其他元素的事件来改变一个属性。它比其他方法容易得多。

Answer 3

没有

（对不起）

CSS没有办法提升DOM，这不是它的工作方式 - 因此任何body的子元素（如按钮）都无法遍历body body使用CSS选择器。

因此，有两种方法可以做到这一点：

使用javascript添加/更改按钮上的div样式
有一个绝对定位的宽度/高度100％左上角：0 <button>Click me!</button> <div></div>覆盖在身体上，然后做，例如：

Demo Fiddle

HTML

html, body, div {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
body {
    background:grey;
}
div {
    display:none;
    background:red;
    position:absolute;
    left:0;
    top:0;
}
button {
    z-index:1;
    position:relative;
}
button:focus + div {
    display:block;
    z-index:0;
}

CSS

{{1}}

但是，由于实现此工作所需的各种依赖性，这很可能在生产环境中不起作用，因此首选解决方案。

更改选择器属性CSS

3 个答案:

没有

Demo Fiddle