在css中设计一个div

Question

如果有div说

 <div class="ref"><contents goes here</div>

1. 如何在css中指定div的主体。意思

    <style>
    .ref body  {
       /* ref body contents goes here*/
     }
    </style>
   

   可以完成上述任何事情吗？

2. 如果有人可以解释下面的话

    <style>
     .a  > .bb
     {
     }
    </style>
   

以上是什么意思？

谢谢..

Answer 1

body是一个特定的HTML元素。为了使用ref类来设置div的内容的样式，您的CSS选择器只是.ref，而不是.ref body。

CSS中的>称为子选择器。这意味着右侧的元素必须是左侧元素的子元素。所以：

.a > .bb会匹配此处的bb div：

<div class="a"><div class="bb"></div></div>

但不在这里：

<div class="bb"></div>

Answer 2

  

第一个

CSS仅用于为元素设置样式，而不用于显示HTML。

  

第二次

为具有类名“bb”的所有元素设置样式，这些元素是具有类“a”的元素的子元素[不是后代]。请参阅 child selector

Ex 1

<div class="a">
    <div class="bb"></div>
</div>

Ex 2

<div class="a">
    <div class="bb"></div>
    <div>
        <div class="bb"></div>
    </div>  
</div>

子选择器只会选择第一个带有'bb'类的div而不是带有'bb'类的内部div。

Answer 3

对于第一个，你的意思并不完全清楚。只需使用.ref { /* CSS here */ }即可定位div元素。如果您的意思是通过CSS添加内容，则只能使用:before和:after伪选择器：

.ref:after {
  content: "Some text";
}

注意：您不能将HTML放在那里，只能放入文本。

---

对于第二个，它会查找类bb的所有元素，它们是类a的直接子元素。例如，它将匹配此代码中的p

<div class="a">
  <div>something</div>
  <p class="bb">class bb</p>
</div>

但它不符合这个：

<div class="a">
  <div>
      <p class="bb">class bb</p>
  </div>
</div>