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

2021-05-17 22:36:50 +08:00
 zxCoder

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

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

比如

#a h2,h3{
  color:red;
}

其实变成了#a h2 和 h3

965 次点击
所在节点    问与答
13 条回复
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
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
我错了,2 楼是对的
iBugOne
2021-05-18 06:13:50 +08:00
请用 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
@zxCoder 预编译 15 分钟搞定,就是 node 和 npm 如果没有提前储备的话,准备时间会比较长,大概半天。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/777548

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX