Question

嘿伙计们我用css击中一些元素时遇到了麻烦。我在div中有很多div，我试图定位元素，所以我可以用我的CSS设置它们。这是我的HTML：

<html class="ng-scope">
<body ng-controller="appController" class="ng-scope">
<div class="header ng-isolate-scope" logo="appModel.config.logoUrl" header-one="appModel.config.headerLabelOne" header-two="appModel.config.headerLabelTwo">
<div class="header-top"></div>
<div class="header-bottom"></div>
<img class="logo" ng-src="assets/images/logo.png" src="assets/images/logo.png"><div class="header-one ng-binding">WHAT PEOPLE ARE SAYING:</div><div class="header-two ng-binding">Loreal - Share Of Buzz</div>
<img class="powered-by" src="assets/images/poweredby.png"></div>
<!-- ngView:  -->
<div class="view-container ng-scope" ng-view="">
<div class="mentions ng-scope">

<!-- Modal -->
<div class="modal fade ng-scope" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div class="mention-detail" style="width: 338px; height: 104px;">
                    <div class="social-logo instagram-account"></div>
                    <div class="detail-image hidden" style="background-image: url('')"></div>
                    <div class="profile-info" style="left: 40px">
                        <div class="user-info">
                            <div class="profile-picture" style="background-image: url('http://scontent.cdninstagram.com/t51.2885-19/s150x150/13636101688972106_a.jpg')"></div>
                            <div>
                                <div class="name">Perfjrine Dlpt</div>
                                <div class="handle">@perfjrine.dpt</div></div>
                            </div>
                            <div class="tweet-stats">
                                <span class="rank stat">SYNTHESIORANK</span>
                                <span class="synth-value value" "="">1.9</span>
                            </div>
                            <div class="tweet">
                                <div class="tweet-inner">La douceur d'avène adoptée #avène #douceur</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="lib/bootstrap/js/modal.js" class="ng-scope"></script>
</div>

我尝试使用css访问的课程是用户的name，如下所示：

.modal-body .mention-detail .profile-info .user-info .name {
  color: #444444;
  margin-top: 4px;
}

任何人都知道为什么我的方法不起作用？你能帮忙的话，我会很高兴。谢谢！

Answer 1

您的选择器正在为我工作并正确更改.name。

我必须做的一个修改是添加CSS：

<head>
    <link rel="stylesheet" href="test.css">
</head>

在html标签之后。

如果这不起作用，也许另一条规则优先考虑？

Answer 2

所以你的CSS看起来应该是正确的（虽然尽量不要将4个以上的选择器嵌套在一起）。您可以在CSS页面下面进一步确定另一个冲突的样式（使用比“name”更具体的类名的一个很好的理由 - 样式名称冲突的可能性很高）。

尝试检查Chrome开发者工具中的元素 - 它会以相反的顺序显示CSS规则（因此，风格指南中最低的内容在Chrome中最高）。你会看到样式是如何被覆盖的。

此外，避免使用内联样式 - 在网站生效或将其合并到其他系统后，编辑CSS通常比HTML更容易。将样式保存在样式表中始终是最佳做法。

用另一个css类命中一个元素内的css类

2 个答案: