Простейший способ преобразования всех классов в строку в CSS

У меня есть несколько классов, которые используются для Styling, и все они отображаются с использованием блочного режима. Я хотел бы преобразовать их все в inline. Есть ли простой способ конвертировать их всех инлайн, вместо того, чтобы вручную собирается каждый класс, чтобы преобразовать их в индивидуальном порядке встраивать ...Простейший способ преобразования всех классов в строку в CSS

Раздел кода:

<div class="contentbody"> 
    <p> 
     Register here! 
    </p> 
    <a href="{% url 'parent_register_step1' %}" 
     class="bbutton textshadowclass boxshadow"> 
     <div class="boxshadowinset green"> 
      Register 
     </div> 
    </a> 
    <p> 
     Forgot your password? 
    </p> 
    <a href="{% url 'parent_forgot_password' %}" 
     class="bbutton textshadowclass boxshadow"> 
     <div class="boxshadowinset green"> 
      Reset Password 
     </div> 
    </a> 
</div>

Я хотел бы изменить классы bbutton, textshadowclass, коробка тень, boxshadowinset зеленый в inline .. Каков самый простой способ?

Примечание: эти классы используются в других разделах, посвященных страницам. Я хотел бы изменить определенный раздел только встроенным. Это не должно повлиять на всю страницу ...

Позвольте мне объяснить более подробно, что я делаю: enter image description here

Я хотел бы, чтобы преобразовать это в инлайн, так что регистр и сброса пароля появляется на тот же линия ...

источник

2012-06-21 lakesh

чтобы выбрать только те классы, которые вместо этого contentbody класса, вам нужен CSS element>element Selector:

div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... { 
    display: inline; 
}

(добавить несколько классов в список, если вы хочу, чтобы другие были включены также)

Дополнительная информация: Если вы постоянно нуждаетесь в том, чтобы эти классы были встроенными, я бы предложил просто (один раз) перейти к каждому классу и добавить встроенный класс для каждого элемента, это упростит код в долгосрочной перспективе.

Edit:

использовать union selector (жаль, что я не могу найти более официальную ссылку), чтобы выбрать элементы, которые имеют набор несколько классов:

div.contentbody>.boxshadowinset.green { 
    display: inline; 
}

Обратите внимание на . (и без пробела) между boxshadowinset и green

Я действительно верю, что это поддерживается современными браузерами, но IE6, похоже, имеет некоторые проблемы с ним ,

источник

2012-06-21 08:10:01 Veger

или используйте селектор '*' для преобразования всех элементов в строку. – acme

Хе-хе ... может быть даже хорошо работает, если более 50% элементов должны быть встроенными ...: P – Veger

классы были использованы в других разделах моего html ... следовательно, это влияет и на остальных. Как избежать этих ... Я хотел бы, чтобы эти классы были встроены в этот раздел html ... – lakesh

Один из способов - просто применить идентификатор к вашему оберточному элементу.

<div class="contentbody" id="contentbody">

Затем в CSS, добавьте стиль

div#contentbody a, div#contentbody div{ display: inline; }

Благодаря CSS элементов иерархии, все они будут принимать внутренний стиль, а не свой собственный стиль.

Основной пример здесь. http://jsfiddle.net/H97c5/2/

источник

2012-06-21 08:15:57

Простейший способ преобразования всех классов в строку в CSS

ответ

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