Нажатие класса 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; 
}

Каждый знает, почему мой подход не работает? Любая помощь будет приятной. благодаря!

источник

2016-08-22 amigo21

Откуда вы знаете, что проблема с селектором? Вы понимаете, что порядок, в котором появляются правила CSS, важен, не так ли? – enhzflep

Зачем вам нужно больше, чем '.name'? – zzzzBov

Вывести '' = "" 'в эту строку ...' 1.9' – miir

Итак, ваш CSS выглядит так, как будто он должен быть прав (хотя старайтесь не встраивать более четырех селекторов внутри друг друга). У вас может быть другое противоречивое определение стиля далее по странице CSS (хорошая причина использовать имена классов более конкретно, чем «имя» - существует высокая вероятность конфликта имени стиля).

Попробуйте проверить элемент в Инструментах разработчика Chrome - он покажет правила CSS в обратном порядке (так что самые низкие на вашем устройстве стили являются самыми высокими в Chrome). Вы увидите, как стили перезаписываются.

Кроме того, избегайте создания встроенного стиля - часто намного проще редактировать CSS, чем HTML, после того, как сайт находится в прямом эфире или включен в другие системы. Всегда лучше сохранять стили в своей таблице стилей.

источник

2016-08-22 19:47:58

Если вы хотите, чтобы я взглянул дальше, поместите весь код, который у вас есть, в новое перо на http://codepen.io/ –

, спасибо Кейт, теперь я работаю. Я использовал инструменты chrome dev, чтобы убедиться, что это ударит или нет. Кажется, что это только ударит, если я поместил код в мой .css-файл. Я изменяю.меньше файла раньше, и я думаю, что он не был должным образом скомпилирован/отражен. Благодаря! – amigo21

Ваш селектор работает для меня и правильно меняет имя.

одной модификации я должен был сделать, это добавление в CSS:

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

после тега HTML.

Если это не сработает, возможно, другое правило имеет приоритет?

источник

2016-08-22 19:47:22

Нажатие класса css внутри элемента с другим классом css

ответ

Смежные вопросы