在另一个css类中击中一个元素中的css类
嗨,我在用css击中某些元素时遇到了问题。我在div中有很多div,我正在尝试将这些元素作为目标,以便我可以用我的CSS来设计它们。这里是我的html:在另一个css类中击中一个元素中的css类
<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;
}
任何人都知道为什么,我的做法是不工作?你能帮忙的话,我会很高兴。谢谢!
所以你的CSS看起来应该是正确的(尽管不要将多于4个选择器嵌套在另一个中)。你可以在CSS页面下面进一步确定另一种相互冲突的风格(这是使用比“name”更具体的类名的一个很好的理由 - 风格名称冲突的可能性很高)。
尝试在Chrome开发人员工具中检查元素 - 它会以相反的顺序显示CSS规则(因此,您的styleguide中最低的元素在Chrome中最高)。你会看到样式是如何被覆盖的。
另外,避免做内联样式 - 在网站生效或合并到其他系统后,通常比HTML更容易编辑CSS。将样式保留在样式表中始终是最佳做法。
如果您希望我进一步了解一下,请将所有的代码放到http://codepen.io/ –
,感谢凯特,我现在就开始工作。我使用了chrome开发工具来查看它是否打中。它似乎只是如果我把代码放入我的.css文件中。我一直在修改。减少文件之前,我想这不是编译/反映正确。谢谢! – amigo21
您的选择器正在为我工作,并正确更改.name。 HTML标记后
<head>
<link rel="stylesheet" href="test.css">
</head>
:
一种修改我所要做的就是将在CSS。
如果这不起作用,也许另一个规则是优先?
你怎么知道选择器是问题?你意识到CSS规则出现的顺序很重要,对吗? – enhzflep
为什么你需要比'.name'更多? – zzzzBov
取出'“=”“'在这一行......' 1.9' – miir