在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”的元素的子元素（不是子元素）。 查看子选择器

例1

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

例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，只能在文本中放置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>