html/HTML5 如何分别为每个这些flexbox类设置

的样式？ 返回

如何分别为每个这些flexbox类设置

的样式？


Just do it
2025-02-06 05:43:22 (27天前)


我需要设置＆lt; h1＆gt;的样式每个弹性框的文本（文本对齐，字体大小等）都不同。
我试图这样做，但它没有奏效。
我从这个答案中获取了代码flexbox代码……

6 条回复
  1. 0# 庸人自扰 | 2019-08-31 10-32


    我首先要说的是，最好只在页面上包含一个h1。所有其他人应该是

    h2

    ，

    h3

    等等。这对SEO，语义和可访问性是最好的（除非你在其中添加其他h1

    section

    要么

    article

    标签）。如果你想以不同的方式设置不同的h2，我建议添加基于内容的类来定义

    为什么

    你用不同的方式设计它们，比如说

    .intro h2

    要么

    .hero-article h2

    。



    也就是说，我在每个元素旁边添加了有效的CSS选择器。



    该

    >

    组合器意味着“只选择

    .box

    这是一个直接的孩子

    .wrapper

    （不是任何后代）。



    为了目标不同

    h1

    在…内

    .box-wrap .box h1

    结构，你想要添加不同的类（不要使用id来设置样式），或者使用伪选择器

    .box-wrap .box:first-child h1

    ，

    .box-wrap .box:last-child h1

    ， 要么

    .box-wrap .box:nth-child(odd) h1

    等



    1.     
            
       
        
       
          
      Wrapper
       
        

        
       
          
       
            
      Box-wrap
       
          

          
       
            
      Box
       
          

        

    3. </code>
    4.

  2. 1# 句号了 | 2019-08-31 10-32


    如果您要编辑HTML / CSS代码，至少应该学习它的基础知识; CSS的整个想法是为HTML元素设计样式，可以使用它

    选择

    （类，ID，伪元素）;这些选择器可以结合起来改变


    特异性


    目标元素的选择，它允许您从一般元素中选择一个非常具体和唯一的元素。



    随着线

    .wrapper > .box-wrap > .box:last-child

    你告诉你的CSS目标

    .box

    元素是最后一个元素，也是该元素的直接子元素

    .box-wrap

    元素，它再次是直接的孩子

    .wrapper

    元件



    在你的情况下，如果你有三个

    h1

    不是同一父级子元素的元素，最简单的方法是添加特定于每个元素的类，然后将样式添加到该CSS类。像这样：







    1.         
                .heading {
        font-size: 22px;
      }

      .h1 {
        color: red;
      }

      .h2 {
        color: blue;
        font-size: 32px;
      }

      .h3 {
        color: green;
        font-size: 14px;
      }
              
            


    1.         
                

        
      Heading 1



        
      Heading 2



        
      Heading 3






    使用您的代码：







    1.         
                .wrapper {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }

      .wrapper> {
        flex: 1;
        margin: 5px;
      }

      .wrapper>.box-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .wrapper>.box-wrap>.box {
        flex: 1;
        margin: 5px;
      }

      .wrapper>.box-wrap>.box:first-child {
        margin-top: 0;
      }

      .wrapper>.box-wrap>.box:last-child {
        margin-bottom: 0;
      }

      .box {
        border: 1px solid;
      }

      .wrapper h1 {
        font-size: 15px;
        font-style: italic;
        color: #555;
        text-align: left;
      }

      .box-wrap h1 {
        font-size: 22px;
        color: #777;
        text-align: right;
      }

      .box .header1 {
        color: red;
      }

      .box .header2 {
        color: green;
      }

      .box .header3 {
        color: blue;
      }
              
            


    1.         
                <!DOCTYPE html>




        
        
        




        <span class="pln">Test</span>

        







        

          

            
      Wrapper

          

          

            

              
      Box-wrap

            

            

              
      Box

            

          

        

    4.





  3. 2# Mystery☀ | 2019-08-31 10-32



    正如您在现有代码中看到的那样，在CSS中选择这样的元素很难理解，并且对于html的顺序和结构非常具体。



    建议的方法是将类添加到h1或.box，以便您可以更直接地设置它们的样式。



    1.     
            
    2. .small-italic {
        font-size: 15px;
        font-style: italic;
      }
    3. </code>
    4.


    要么



    1.     
            
    2. .small-italic-headline h1 {
        font-size: 15px;
        font-style: italic;
      }
    3. </code>
    4.


    如您所见，您还可以为元素分配多个类。



    关于您复制的代码：



    你可以想象选择器使用

    ＆gt;组合子

    像DOM树中的路径或地址。



    对于你的第一个h1，“地址”将是

    .wrapper > .box > h1

    。每个＆gt;意味着您要为直接子元素添加选择器。



    在你自己的风格，你正在使用

    衰落的组合子

    这意味着您要为父元素内部的元素添加选择器。



    所以

    .wrapper h1

    匹配你所有的h1，因为它们都在包装元素中。



    你的第二个选择器也一样

    .box h1

    ：所有h1都在.box元素中。




    .box-wrap h1

    将解决你的两个h1，它们位于.box-wrap元素中的某个位置。


  4. 3# 誓言 | 2019-08-31 10-32



    您应该避免一次显示多个相同的h标记。无论如何，你可以给每个人一个id属性，给他们“独特”的触摸。



    1.     
            
      Sample text
    2. </code>
    3.

  5. 4# 仙风道骨刘憨憨 | 2019-08-31 10-32


    CSS选择器

    .wrapper > .box-wrap > .box:last-child

    选择

    last

    class =的子元素

    box

    class =的子元素

    box-wrap

    class =的元素

    wrapper

    。 （看到：

    CSS选择器

    ）



    1.     
            
              <- elements with class=wrapper
        

        
           <- elements with class=box-wrap
          

          
        <- last element with class=box
        

    3. </code>
    4.


    您可以为每个ID分配唯一的ID

    h1

    元素并在CSS中定义其样式，或使用内联CSS（参见：

    HTML样式 - CSS

    ）


登录 后才能参与评论