css - 在 CSS/LESS 中选择 child 的 child ？-6ren

css - 在 CSS/LESS 中选择 child 的 child ？

转载作者：行者123 更新时间：2023-11-28 18:35:03

24

4

我有以下 LESS 格式的 CSS:

body {
  width: 100%;
  background: #F4F4F4 url("images/top_background.png") repeat-x top left;
  margin: 0px;

  > header {
    background: transparent url("images/header_logo.png") no-repeat center right;

    width: 960px;
    margin: 0px auto;

    > hgroup {
      float: left;

      height: 100px;

      padding: 0px;
      bottom: 40px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;

      > h1 {
        line-height: 100px;

        font-size: 3.7em;
        text-transform: lowercase;

        float: left;
        margin: 0px;

        > a {
          color: #FEFFFE;
          text-decoration: none;
        }
      }
    }
  }

当编译成 CSS 时，它看起来像这样:

body {
  width:100%;
  background:#f4f4f4 url("images/top_background.png") repeat-x top left;
  margin:0px;
}
body > header {
  background:transparent url("images/header_logo.png") no-repeat center right;
  width:960px;
  margin:0px auto;
}
body > header > hgroup {
  float:left;
  height:100px;
  padding:0px;
  bottom:40px;
  color:#fefffe;
  font-family:Arial, Helvetica, sans-serif;
}
body > header > hgroup > h1 {
  line-height:100px;
  font-size:3.7em;
  text-transform:lowercase;
  float:left;
  margin:0px;
}
body > header > hgroup > h1 > a {
  color:#fefffe;
  text-decoration:none;
}

这似乎只适用于 <header>仅标记。而且里面的所有元素都没有样式。我的问题是，我如何引用 <header> 的 child ？元素？我的用法是 body > header > hgroup > h1 > a对吗？

这是 HTML 内容。我省略了一些部分，但基本上这是代码。

<body>
<header>
    <div id="header">
        <hgroup>
            <h1><a href="#">Website Title</a></h1>
        </hgroup>
        <div class="clearfix"></div>
        <nav>
            <ul id="topnav">
                <li><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
                <li><a href="#">Navigation 5</a></li>
                <li><a href="#">Navigation 6</a></li>
                <li><a href="#">Navigation 7</a></li>
            </ul>
        </nav>
        <div class="clearfix"></div>
    </div>
</header>
</body>

最佳答案

哦，哇，那太蠢了。我没有意识到我有一个我以前使用过的流氓 DIV，但忘记删除了。 xD 通过删除 ID 为 header 的 div 解决了问题。

关于css - 在 CSS/LESS 中选择 child 的 child ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13023840/

24

4

0

文章推荐： javascript - 我有办法在 slickgrid 标题中垂直对齐文本

文章推荐： javascript - 使用ajax通过jquery调用php函数

文章推荐： ios - 使用 objc_setAssociatedObject 时架构 armv7 的 undefined symbol

less - WebStorm LESS Filewatcher 找不到 RubyGem less
我在尝试使用 WebStorm LESS File Watcher 时遇到此错误 /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/
less - .less 变量插值的正确语法是什么？
我有一个带有以下结构的 .less 样式表: @width:600; .some-style { width:@{width}px; } 这给出了以下错误: Expected '}' on l
less - LESS @import的node_modules的相对路径
说我有以下结构 /node_modules /src /components /component1 /style /style.less
less - 灰度不适用于 LESS
我想使用灰度函数，但 LESS 一直抛出此错误，我没有看到灰度的 mixin 或如何使用它。有什么帮助吗？ Error 148 Expected color in function 'graysc
less - @Import 将目录中的所有 less 文件导入到 less 文件中
我的文件较少，如下面的目录结构 vendor/includes/file1.less vendor/includes/file1.less vendor/includes/file1
less - LESS 是否可以防止重复样式？
如果我在 LESS 中定义以下嵌套样式: .nav-bar { .navbar-brand { background: #000; } } .nav-bar {
less - lein-less 未在 figwheel 启动时或 .less 文件更改时运行
我正在尝试设置一个使用 lein-less 插件编译 .less 文件的 clojurescript 项目。我应该说我是 clojurescript 的新手。问题是它似乎没有运行。它在我运行“lein
node.js - 如何使用 less by "var less = require(' less');"
有人会这样使用“less”: var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, css
css - Less.js LoadError - 没有这样的文件要加载 - less 在 main .less 文件上
我正在尝试在一个新元素中测试 less.js。我 100% 确定 javascript 文件加载正常，但我的 css 文件夹中的 less 文件一直出现此错误。我打算在启动之前使用 less.app
less - 在 LESS 中引用具有多级嵌套的父级
我有以下更少: .container { .column, .columns { .one& { width: 40px; }
less - 为什么 LESS 不覆盖在两个相同选择器中声明的属性？
这是一个代码(test.less): body { padding: 50px; } body { padding: 20px; } 为什么在编译成 CSS 后我有这个: body {
less - 在 LESS 的选择器中使用变量
我有一个变量 @index我想输出一个选择器，以便当 @index是 3 , 选择器是 [data-sth="3"] . 更长的例子: @index: 3; /* selector here */ {
less - 重用 LESS 嵌套样式
假设我有一个使用 Less 定义的样式: ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } 稍后，我想重新使用 un
less - 如何使用 Less 在另一个类中应用连接类？
假设我有以下 Less 设置: .box { border: 1px solid #333; &.error { background-color: Red; } } 如果我想
less - 包含一个 less 文件并传递参数
我有一个 common.less文件，它为不同的皮肤实现了基本的 CSS: @textColor: black; @iconSize: 16px; .container: { color: @
less - 如何在浏览器中编译 LESS 文件
我创建了使用 LESS 功能切换主题的代码。不幸的是，LESS 文件不会在浏览器中编译。如何在浏览器中编译 LESS 文件？最佳答案这是一张documentation : Client-side
less - 如何使用 less 定位类中的元素？
我想使用 less 来定位类中的特定元素。在这种情况下，我想定位类 button 的元素，但在此范围内我想定位一个 anchor 标签 a . 目前我有: .button { /* lots
less - Grunt、Less 和文件监视
我正在努力做某事。我的项目是这样的: /app /assets /components /stylesheets /less
less - 覆盖 LESS 变量是不好的做法吗？
我目前正在一个项目中使用 Twitter Bootstrap，包括 LESS 文件并使用我们编写的一些附加 LESS 代码进行编译。最新版本意味着我们需要覆盖一些 Bootstrap LESS 变量
less - 如何使用 LESS 合并父子样式属性
我有这个更少的代码，这工作得很好。我只是想在 less cli 编译它时节省一些空间。 .secondary-content { background: #ffcc80; color:

首页

博学

6Ren·AI

商城

css - 在 CSS/LESS 中选择 child 的 child ？