css 能实现 #id (h1,h2){...} 这种功能吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1271 天前的主题，其中的信息可能已经有所发展或是发生改变。

就是某一个选择器下的一些标签

刚才调了好久的 bug 才发现是这个问题

比如

#a h2,h3{
  color:red;
}

其实变成了#a h2 和 h3

选择器

CSS

color

red

13 条回复 • 2021-05-18 09:31:41 +08:00

crab

2021-05-17 22:41:06 +08:00

子选择器？

geelaw

2021-05-17 22:42:53 +08:00

CSS 4 开始可以用 :is，见 https://www.w3.org/TR/selectors-4/#matches

CSS 4 之前只能手工展开，写成 #a h2, #a h3

Cbdy

2021-05-17 22:43:51 +08:00 via Android

1. 一个页面的 ID 不能重复
2. 你想要的选择器是这样的：h2#a {}
3. 找本书系统学习一下吧

zxCoder

2021-05-17 22:45:41 +08:00

@geelaw 懂了谢谢

zxCoder

2021-05-17 22:46:54 +08:00

@Cbdy
1 我的 id 没有重复
2 我想要的选择器是#a h2, #a h3
3 新手教程里基本上都是单独讲几种选择器，暂时没找到结合的复杂例子，所以才来问

Cbdy

2021-05-18 04:26:14 +08:00 via Android

我错了，2 楼是对的

iBugOne

2021-05-18 06:13:50 +08:00 via Android

请用 Sass/SCSS 或者 Less

dfkjgklfdjg

2021-05-18 09:05:52 +08:00

为啥不用预编译？ less,scss,stylus 都支持：
less 和 scss 是一样的，需要花括号括起来，然后写入子选择器
```scss
#a {
h1,h2{
// style
}
}
```
stylus 稍微不一样点，没有花括号冒号和分号
```stylus
#a
h1,h2
// style
```

最后编译成 CSS 就行，启动 `watch` 可以自动编译

```css
#a h1 { // style }
#a h2 { // style }
```

dfkjgklfdjg

2021-05-18 09:07:12 +08:00

淦，忘记了回复是没有 md 格式的，缩进都没了😂，自己看下 scss 的文档就行。

zxCoder

2021-05-18 09:08:23 +08:00

@dfkjgklfdjg

初学者这几个东西还得后面慢慢学。。。。

dfkjgklfdjg

2021-05-18 09:14:28 +08:00

@zxCoder 就是 CSS 的扩展，你会写 CSS 就行，什么循环语句、条件语句、变量什么的都不需要学，等你需要的时候再看就可以了。
编译也就一句命令行，就是需要学一下安装 node 和使用 npm 安装依赖。

build 手动编译 => "stylus ./css/stylus --out ./css"
watch 文件改变自动编译 => stylus -w ./css/stylus --out ./css"

"./css/stylus" 就是源目录， "./css" 就是编译之后的输出目录

zxCoder

2021-05-18 09:27:14 +08:00

@dfkjgklfdjg 多谢我看看去

dfkjgklfdjg

2021-05-18 09:31:41 +08:00