我需要设置< h1>的样式每个弹性框的文本(文本对齐,字体大小等)都不同。我试图这样做,但它没有奏效。我从这个答案中获取了代码flexbox代码……
我首先要说的是,最好只在页面上包含一个h1。所有其他人应该是 h2 , h3 等等。这对SEO,语义和可访问性是最好的(除非你在其中添加其他h1 section 要么 article 标签)。如果你想以不同的方式设置不同的h2,我建议添加基于内容的类来定义 为什么 你用不同的方式设计它们,比如说 .intro h2 要么 .hero-article h2 。
h2
h3
section
article
.intro h2
.hero-article h2
也就是说,我在每个元素旁边添加了有效的CSS选择器。
该 > 组合器意味着“只选择 .box 这是一个直接的孩子 .wrapper (不是任何后代)。
>
.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 等
h1
.box-wrap .box h1
.box-wrap .box:first-child h1
.box-wrap .box:last-child h1
.box-wrap .box:nth-child(odd) h1
<div class="wrapper"> <!-- .wrapper --> <div class="box"> <!-- .wrapper > .box --> <h1>Wrapper</h1> <!-- .wrapper > .box h1 --> </div> <div class="box-wrap"> <!-- .box-wrap --> <div class="box"> <!-- .box-wrap .box --> <h1>Box-wrap</h1> <!-- .box-wrap .box h1 --> </div> <div class="box"> <!-- .box-wrap .box --> <h1>Box</h1> <!-- .box-wrap .box h1 --> </div> </div> </div>
如果您要编辑HTML / CSS代码,至少应该学习它的基础知识; CSS的整个想法是为HTML元素设计样式,可以使用它 选择 (类,ID,伪元素);这些选择器可以结合起来改变 特异性 目标元素的选择,它允许您从一般元素中选择一个非常具体和唯一的元素。
随着线 .wrapper > .box-wrap > .box:last-child 你告诉你的CSS目标 .box 元素是最后一个元素,也是该元素的直接子元素 .box-wrap 元素,它再次是直接的孩子 .wrapper 元件
.wrapper > .box-wrap > .box:last-child
.box-wrap
在你的情况下,如果你有三个 h1 不是同一父级子元素的元素,最简单的方法是添加特定于每个元素的类,然后将样式添加到该CSS类。像这样:
.heading { font-size: 22px; } .h1 { color: red; } .h2 { color: blue; font-size: 32px; } .h3 { color: green; font-size: 14px; }
<div> <h1 class="heading h1">Heading 1</h1> </div> <div> <h1 class="heading h2">Heading 2</h1> </div> <div> <h1 class="heading h3">Heading 3</h1> </div>
使用您的代码:
.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; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Test</title> <style> .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 h1 { font-size: 32px; color: #CC000; text-align: right; } @media (max-width: 768px) { .wrapper { -webkit-flex-direction: column; flex-direction: column; } .box h1, h1 { text-align: center; } } </style> </head> <body> <div class="wrapper"> <div class="box"> <h1 class="header1">Wrapper</h1> </div> <div class="box-wrap"> <div class="box"> <h1 class="header2">Box-wrap</h1> </div> <div class="box"> <h1 class="header3">Box</h1> </div> </div> </div> </body>
正如您在现有代码中看到的那样,在CSS中选择这样的元素很难理解,并且对于html的顺序和结构非常具体。
建议的方法是将类添加到h1或.box,以便您可以更直接地设置它们的样式。
<h1 class="small-italic"> .small-italic { font-size: 15px; font-style: italic; }
要么
<div class="box small-italic-headline"> .small-italic-headline h1 { font-size: 15px; font-style: italic; }
如您所见,您还可以为元素分配多个类。
关于您复制的代码:
你可以想象选择器使用 &gt;组合子 像DOM树中的路径或地址。
对于你的第一个h1,“地址”将是 .wrapper > .box > h1 。每个&gt;意味着您要为直接子元素添加选择器。
.wrapper > .box > h1
在你自己的风格,你正在使用 衰落的组合子 这意味着您要为父元素内部的元素添加选择器。
所以 .wrapper h1 匹配你所有的h1,因为它们都在包装元素中。
.wrapper h1
你的第二个选择器也一样 .box h1 :所有h1都在.box元素中。
.box h1
.box-wrap h1 将解决你的两个h1,它们位于.box-wrap元素中的某个位置。
.box-wrap h1
您应该避免一次显示多个相同的h标记。无论如何,你可以给每个人一个id属性,给他们“独特”的触摸。
<h1 id="whatever_you_wanna_call_this">Sample text</h1>
CSS选择器 .wrapper > .box-wrap > .box:last-child 选择 last class =的子元素 box class =的子元素 box-wrap class =的元素 wrapper 。 (看到: CSS选择器 )
last
box
box-wrap
wrapper
<div class="wrapper"> <- elements with class=wrapper <div class="box"></div> <div class="box-wrap"> <- elements with class=box-wrap <div class="box"></div> <div class="box"></div> <- last element with class=box </div> </div>
您可以为每个ID分配唯一的ID h1 元素并在CSS中定义其样式,或使用内联CSS(参见: HTML样式 - CSS )