V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
zxCoder
V2EX  ›  问与答

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

  •  
  •   zxCoder · 2021-05-17 22:36:50 +08:00 · 949 次点击
    这是一个创建于 1267 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    比如

    #a h2,h3{
      color:red;
    }
    

    其实变成了#a h2 和 h3

    13 条回复    2021-05-18 09:31:41 +08:00
    crab
        1
    crab  
       2021-05-17 22:41:06 +08:00
    子选择器?
    geelaw
        2
    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
        3
    Cbdy  
       2021-05-17 22:43:51 +08:00 via Android
    1. 一个页面的 ID 不能重复
    2. 你想要的选择器是这样的:h2#a {}
    3. 找本书系统学习一下吧
    zxCoder
        4
    zxCoder  
    OP
       2021-05-17 22:45:41 +08:00
    @geelaw 懂了 谢谢
    zxCoder
        5
    zxCoder  
    OP
       2021-05-17 22:46:54 +08:00
    @Cbdy
    1 我的 id 没有重复
    2 我想要的选择器是#a h2, #a h3
    3 新手教程里基本上都是单独讲几种选择器,暂时没找到结合的复杂例子,所以才来问
    Cbdy
        6
    Cbdy  
       2021-05-18 04:26:14 +08:00 via Android
    我错了,2 楼是对的
    iBugOne
        7
    iBugOne  
       2021-05-18 06:13:50 +08:00 via Android   ❤️ 2
    请用 Sass/SCSS 或者 Less
    dfkjgklfdjg
        8
    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
        9
    dfkjgklfdjg  
       2021-05-18 09:07:12 +08:00
    淦,忘记了回复是没有 md 格式的,缩进都没了😂,自己看下 scss 的文档就行。
    zxCoder
        10
    zxCoder  
    OP
       2021-05-18 09:08:23 +08:00
    @dfkjgklfdjg

    初学者 这几个东西还得后面慢慢学。。。。
    dfkjgklfdjg
        11
    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
        12
    zxCoder  
    OP
       2021-05-18 09:27:14 +08:00
    @dfkjgklfdjg 多谢 我看看去
    dfkjgklfdjg
        13
    dfkjgklfdjg  
       2021-05-18 09:31:41 +08:00
    @zxCoder 预编译 15 分钟搞定,就是 node 和 npm 如果没有提前储备的话,准备时间会比较长,大概半天。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   946 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:35 · PVG 05:35 · LAX 13:35 · JFK 16:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.