Применение стилей CSS ко всем элементам внутри DIV

Я хотел бы применить CSS файл к конкретному DIV на моей странице. Это структура страницы:

<link rel="stylesheet" href="style.css" />
...
<body>
   <div id="pagina-page" data-role="page">
   ...
   <div id="applyCSS">
      (all the elements here must follow a concrete CSS rules)
   </div>
   ...
</body>

Я попытался применить правила редактирования файла CSS таким образом (файл CSS настолько велик):

#applyCSS * {     (For all the elements inside "applyCSS" DIV:)
    .ui-bar-a {
       ...
       ...
    }
    .ui-bar-a .ui-link-inherit {
       ...
    }
    ...
}

Но это решение не работает. Итак, как я могу это сделать?

Ответы

Ответ 1

Вы можете попробовать:

#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}

Etc и т.д. Это то, что вы ищете?

Ответ 2

#applyCSS > * {
  /* Your style */
}

Отметьте JSfiddle

Он будет стилизовать всех детей и внуков, но будет исключать свободно распространяющийся текст в самом div и только объект, охваченный оболочкой (по тегам).

Ответ 3

Я не понимаю, почему он не работает для вас, он работает для меня: http://jsfiddle.net/igorlaszlo/wcm1soma/1/

HTML

<div id="pagina-page" data-role="page">
    <div id="applyCSS">
    <!--all the elements here must follow a concrete CSS rules-->
        <a class="ui-bar-a">This "a" element text should be red
            <span class="ui-link-inherit">This span text in "a" element should be red too</span>
        </a>      
    </div>
</div>

CSS

#applyCSS * {color:red;display:block;margin:20px;}

Возможно, у вас есть специальные правила, которые вы не делили с нами...

Ответ 4

Напишите все классы /id CSS, как показано ниже. #applyCSS ID будет родителем всего кода CSS.

Например, вы добавляете класс .ui-bar-a в CSS для применения к вашему div:

#applyCSS .ui-bar-a  { font-size:11px; } /* This will be your CSS part */

Ниже представлена ​​ваша часть HTML:

<div id="applyCSS">
   <div class="ui-bar-a">testing</div>
</div>

Ответ 5

Если вы ищете ярлык для записи всех ваших селекторов, тогда препроцессор CSS (Sass, LESS, Stylus и т.д.) может делать то, что вы ищете. Однако сгенерированные стили должны быть действительными CSS.

Sass:

#applyCSS {
    .ui-bar-a {
       color: blue;
    }
    .ui-bar-a .ui-link-inherit {
       color: orange;
    }
    background: #CCC;
}

Сгенерированный CSS:

#applyCSS {
  background: #CCC;
}

#applyCSS .ui-bar-a {
  color: blue;
}

#applyCSS .ui-bar-a .ui-link-inherit {
  color: orange;
}

Ответ 6

.yourWrapperClass * {
 /* your styles for ALL */
}

Этот код будет применять стили для всех элементов внутри. yourWrapperClass.

Ответ 7

Альтернативное решение. Добавьте свой внешний CSS в свой HTML файл

<link rel="stylesheet" href="css/applyCSS.css"/>

внутри applyCSS.css:

   #applyCSS {
      /** Your Style**/
    }