Question

我有一个CSS样式表的以下片段，

.header {min-height: 62px; background: #191919 url("images/header.png") bottom repeat-x;}

.header>div {width: 940px; overflow: hidden; margin: 0 auto;}

.header p {margin: 0;}

.header p.title {float: left; max-width: 450px; margin: 0; padding: 10px 17px 10px 0; background: url("images/header-separator.png") right center no-repeat; color: #fff; font: normal 1.833em/42px MuseoSans,sans-serif;}

.header p.title a {color: #fff; text-transform: uppercase;}

我知道标题是一个类，但我无法理解代码中的其他标记。有人可以用样本html解释我吗？

Answer 1

.header > :tag:

表示您正在寻找直接在元素:tag:后代的元素.header，因此这将匹配：

<header class="header">
   <div>
   ...
   </div>
...

但这不符合

<header class="header">
   <section>
      <div>
      ...
      </div>
   ...

其他选择器正在寻找.header元素的通用嵌套元素：

.header里面的一段。
.header
段落内的链接.tader <。li>中的类.title

Answer 2

.header = element / s class'header'

.header>div =元素div .header

的孩子

.header p =元素p孩子的˙.header

.header p.title =元素p，其中包含“标题”类 - .header的儿童

.header p.title a =元素a p.title .header个{{1}}个孩子的clildrens

Answer 3

这是一个使用所有css的示例。 live preview

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.header {min-height: 62px; background: #191919 url("images/header.png") bottom repeat-x;}

.header>div {width: 940px; overflow: hidden; margin: 0 auto;}

.header p {margin: 0;}

.header p.title {float: left; max-width: 450px; margin: 0; padding: 10px 17px 10px 0; background: url("images/header-separator.png") right center no-repeat; color: #fff; font: normal 1.833em/42px MuseoSans,sans-serif;}

.header p.title a {color: #fff; text-transform: uppercase;}
</style>
</head>
<div class="header">
<div>
<img src="images/swag.jpg" width="100%" height="20px" />
</div>
<br /><br /><br /><br />
<p class="title">This is a Title <br /><a href="http://onthemouse.com">this is a link</a></p><br />
<p>this is a paragrapgh</p>
</div>
<body>
</body>
</html>

元素说明： .header a * （标题类下的链接） * {min-height：62px;背景：（颜色十六进制代码）＃191919 * （url to bg picture＆gt;） * url（“images / header.png”）* （位置，重复水平） * bottom repeat-x;}

.header＆gt; div （div内部标题类） {width：940px; （此div内任何图像或对象设置为100％宽度的宽度将具有此宽度）溢出：隐藏; * （无保证金） *保证金：0 * （位置自动，重复自动） * auto;}

.header p * （标题类下的

标记） * {margin：0;}

.header p.title （

带有班级标题的标签） {float：left; （alignment：left） max-width：450px; （最大宽度） margin：0; * （侧面sapce） *填充：10px 17px 10px 0; background：url（“images / header-separator.png”）* （位置居中，不重复） *右中心不重复; * （白色） *颜色：#fff; * （字体大小和系列） * font：normal 1.833em / 42px MuseoSans，sans-serif;}

.header p.title a （链接

标记与标题类） {* （颜色白色） * color：#fff; * （大写字母） * text-transform：uppercase;}

Answer 4

Web选择器上有很多可用的教程。

我会推荐Selectutorial。有关您的选择的详细说明，请参阅class selectors章节和child selectors上的章节。

另请参阅The 30 CSS Selectors you Must Memorize，本文提供了一个很好的概述。

Answer 5

   .header p.title a {color: #fff; text-transform: uppercase;}

会转换为

  <div class="header">
          <p class="title">
                   <a href="some link">All of this text would be WHITE and UPPERCASE</a>
          </p>
  </div>

Answer 6

.header>div means child div of .header class

.header p means assign this css to each and every p tag inside .header class

.header p.title means .title class of p of .header class

.header p.title a means a tags in .title class inside p tag of .header class

CSS中的特定标签

6 个答案: