Question

是否可以在CSS中执行类似的操作：

#include "stm8s.h"
#include "i2c_hal.h"

I2c_Init();

在检查class1的情况下，查看它的兄弟（class2）并将＃sidebar的颜色更改为蓝色。

Answer 1

是的，你可以使用SASS功能在CSS语句中定位一个类。首先你应该Learn SASS。

嵌套功能：

SCSS语法：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

<强>输出：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Answer 2

在CSS中你可以做类似的事情：

.class1:checked + .class2 > .sidebar {
   color : blue
}

如果选中class="class1"复选框，class="class2"他的孩子class="sidebar"将擅长蓝色。

这是一个有效的Codepen

Answer 3

这样对我有用!!现在取决于，您是如何实际使用代码的，或者您是如何编写HTML的。

＆＃13;

/* by default, next text is red */

.class2 {
  color: red;
}
/* if checked, next text is green */

.class1:checked + .class2 {
  color: green;
}
#sidebar {
  color: pink;
}
/* if checked, next text is blue and its child gets below CSS */

.class1:checked + .class2 #sidebar {
  color: blue;
  border: 1px solid #f00;
  display: inline-block;
}

＆＃13;

<label for="check">we are trying to make your code work</label>
<input type="checkbox" id="check" class="class1">
<p class="class2">If the checkbox is checked, the next link SIDEBARLINK should have border of red color for demo purpose.
  <a href="#" id="sidebar">Sidebar Link</a>
</p>

＆＃13;

Answer 4

假设#sidebar位于HTML .class1等的不同部分，则否，您无法执行此操作。 CSS选择器是一系列元素说明符，其中每个说明符位于下一个（子级或后代）或与前一个相同的级别（跟随兄弟），最后一个是目标。您不能随意伸出并影响HTML的不同部分。你试图以侧边栏为目标而发明的花括号符号不是CSS，虽然它看起来有点像SASS，它使一些人回答混淆，但不是SASS和不，SASS不能神奇地做CSS不能做的事情。 SASS仅仅是语法糖。

我可以在CSS语句中定位一个类吗？

4 个答案: