[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Css селекторы
userguest
Есть строчка :
DIV#identificator1.class, DIV#identificator2.class, DIV#identificator3.class, DIV#identificator4.class...{
}

Можно ли использовать другую, более короткую запись типа:
DIV#identificatorN.class...{
}

где N - любое число.



Спустя 22 минуты, 47 секунд (21.06.2010 - 13:14) qpayct написал(а):
конечно можно!

Спустя 20 минут, 22 секунды (21.06.2010 - 13:34) userguest написал(а):
Спасибо.
Как?

Спустя 2 минуты, 43 секунды (21.06.2010 - 13:37) qpayct написал(а):
xsl

Спустя 4 минуты, 48 секунд (21.06.2010 - 13:42) userguest написал(а):
Уже легче, но тем не менее, это отдельная тема для изучения.
Не могли бы вы привести код к моему конкретному примеру?

Спустя 22 минуты, 23 секунды (21.06.2010 - 14:04) qpayct написал(а):
я бы рад, но к величайшему своему стыду и разочарованию не знаю xsl tongue.gif
да и вообще что-то подсказывает мне что это можно сгенерировать при помощи пхп

Спустя 4 часа, 3 минуты, 12 секунд (21.06.2010 - 18:07) Gesandte написал(а):
....помоему вы тут реальную чуш несете и усложнятете себе жизнь wink.gif
Что мешает создать общий класс, который будет задавать внешний вид для всей группы элементов?
Айдишник я так понимаю для js?

div.element { /* стили */ }


в html так

<div id="identificator1" class="element"> ... </div>

Спустя 33 минуты, 33 секунды (21.06.2010 - 18:41) qpayct написал(а):
а если 180 языков? и каждому надо свой флаг прописать тогда что?

Спустя 19 минут, 46 секунд (21.06.2010 - 19:01) Gesandte написал(а):
Каких 180 языков? blink.gif
Какие флаги? smile.gif
Вы вообще щас про что? wink.gif

Спустя 1 час, 19 минут, 55 секунд (21.06.2010 - 20:21) userguest написал(а):
Может быть и чушь. Поясню:
Есть много блоков div c совершенно одинаковыми стилями, но с разными id.
Я попросил предложить краткий вариант этой записи:

DIV#identificator1.class, DIV#identificator2.class, DIV#identificator3.class, DIV#identificator4.class{стили
}

Более того, количество блоков div с новыми id и таким же стилем оформления будет увеличиваться и придется дописывать их вручную через запятую. Поэтому я и спросил "может как-то можно объединить их в одну группу, сдулать что-то вроде маски, ведь отличаться у всех будет только цифра".

Так что может быть мы все же не чушь несем?

Спустя 24 минуты, 9 секунд (21.06.2010 - 20:45) Gesandte написал(а):
как хочеш) ответ я написал выше, если не способен осмыслить тот мессаг, то изобретай велосипед заново. Удачи wink.gif

Спустя 9 часов, 26 минут, 53 секунды (22.06.2010 - 06:12) qpayct написал(а):
ну вот скажем есть у тебя список каждый элемент которого должен быть прописан в CSS с разными иконами флагов предположим
<ul>
<li
class="flag1">flag1</li>
<li
class="flag2">flag2</li>
<li
class="flag3">flag3</li>
....
....
....
</ul>

тыж не будешь прописывать 180 классов

Спустя 4 часа, 9 минут, 32 секунды (22.06.2010 - 10:21) Gesandte написал(а):
qpayct Наверно ты несовсем полно представляеш возможности css и конкретно вопрос топик стартера. Попробую объяснить.
К блоку он применяет id, который как я понял предназначен для javascript, иначе смысла его использовать нет. Все эти блоки как сказано выше имеют один и тот же стиль оформления. ТС пытался задать стили через id, что не рационально в случае если используется несколько элементов с общим стилем. И как он "дадумался" в css придется приписывать каждый id к стилю

div#identificator1, div#identificator2, div#identificator3, div#identificator4 ... {
/* style */
}


Когда данная проблема решается заданием общего класса для всех этих элементов.


<div id="identificator1" class="element"> ... </div>
<div
id="identificator2" class="element"> ... </div>
.....
<div id="identificatorN" class="element"> ... </div>


Если уж это непонятно.......

Что касается твоего примера
Цитата
элемент которого должен быть прописан в CSS с разными иконами флагов

Не совсем понял что ты тут имееш ввиду, что за "иконы флагов" blink.gif
1. Если стиль у всех элементов списка один то я напишу просто

<ul>
<li
class="flag">flag1</li>
<li
class="flag">flag2</li>
<li
class="flag">flag3</li>
....
</ul>


2. Если данные элементы будут в целом одинаковы, ну например

ul {
background: rgb(200, 200, 200);
height: 30px;
list-style: none;
}

ul li.flag {
font: normal 13pt Verdana;
display: inline-block;
}


Но каждый элемент при этом должен иметь какое то отличное от других свойство, например цвет текста, тогда это придется прописывать для каждого элемента

ul li.flag_red {
color: rgb(255, 0, 0);
}

ul li.flag_green {
color: rgb(0, 255, 0);
}

ul li.flag_blue {
color: rgb(0, 0, 255);
}


Непосредственно в теле документа это будет выглядеть так

<ul>
<li
class="flag flag_red">Red</li>
<li
class="flag flag_green">Green</li>
<li
class="flag flag_blue">Blue</li>
</ul>



Надеюсь вопросов больше не будет по организации кода и все понятно? smile.gif

Спустя 11 минут, 46 секунд (22.06.2010 - 10:33) qpayct написал(а):
Да ты мастер стилей верстальщик шестого разряда по африканским шашкам прям я смотрю. Спасибо.
Вот о том и толкуем, что хотим как то в цикле прогнать все отличающиеся только номером классы.

Спустя 14 минут, 54 секунды (22.06.2010 - 10:48) трамонтана написал(а):
Gesandte, вот ты горячишься не по делу) то что ты написал то всё и так понятно, а у чувака один параметр отличается, понимаешь)
background:url(../img/flag/russian.gif)
или
background:url(../img/flag/usa.gif)
или
background:url(../img/flag/japan.gif)

а картинок всего 180


Спустя 10 минут, 31 секунда (22.06.2010 - 10:58) Gesandte написал(а):
трамонтана
Хорошо smile.gif
Предположим это галлерея картинок)
Зачем надо так мудрить и пытаться повесить все на бакгроунд?)


<div class="wrapper">
<?php
foreach ($img_array as $img) {
echo "<div class='image'><img src='images/$img' alt='' /></div>"
}
?>
</div><!-- /div.wrapper -->



Спустя 3 минуты, 2 секунды (22.06.2010 - 11:01) Gesandte написал(а):
Или вообще... если там например в стилях укзываются ну к примеру размеры картинки, то можно и так впринципе записать в css

div.wrapper img {
width: 100px;
}


И в цикле тогда записать только <img src='images/$img' alt='' />

Спустя 8 минут, 33 секунды (22.06.2010 - 11:10) трамонтана написал(а):
Цитата (Gesandte @ 22.06.2010 - 07:58)
трамонтана
Хорошо smile.gif
Предположим это галлерея картинок)
Зачем надо так мудрить и пытаться повесить все на бакгроунд?)


<div class="wrapper">
<?php
foreach ($img_array as $img) {
    echo "<div class='image'><img src='images/$img' alt='' /></div>"
}
?>
</div><!-- /div.wrapper -->

это уже вопрос десятый , а первый вопрос звучал следующим образом:
" Css селекторы - Можно ли использовать другую, более короткую запись типа DIV#identificatorN.class "

Спустя 3 минуты, 57 секунд (22.06.2010 - 11:14) Gesandte написал(а):
все, харош спорить smile.gif

Спустя 2 минуты, 3 секунды (22.06.2010 - 11:16) Basili4 написал(а):
Битва титанов Верстки. Гляжу и балдею.

Спустя 5 минут, 53 секунды (22.06.2010 - 11:22) Basili4 написал(а):
Специалисты вы мне вот что скажити как див у которого position: absolute; научит другие дивы которые под ним не залазить ???? или как поставить див не указывая ему position: absolute; Top:20%; Left:20%; Вот кто лучше ответить тот и победил в Битве smile.gif

Спустя 7 минут, 50 секунд (22.06.2010 - 11:30) qpayct написал(а):
Да понятное дело, что такие вещи просто в пхп генерятся в style="<?php echo $flag['0'];?>"
меня озадачивает почему не сделали массивы и циклы именно для таблиц стилей, как в xsl? Удобно вот в таких ситуациях.

Спустя 12 минут, 19 секунд (22.06.2010 - 11:42) Gesandte написал(а):
Цитата

Вот кто лучше ответить тот и победил в Битве

нафих надо smile.gif

Ты бы лучше картиночку приложил для наглядности. А непосредственно спозиционировть блок, от блока имеющего position: absolute; нельзя.

Это надо?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style
type="text/css">
div.header {
background: rgb(130,150,120);
margin: 20% 0 0 20%;
}

div.content {
background: rgb(240,240,240);
}
</style>
</head>
<body>

<div
class="header">
Минск угрожает сократить экспорт российского газа в Европу
</div>

<div
class="content">
Белоруссия пригрозила сократить объем экспорта российского газа в Европу, если Газпром продолжит сокращать поставки голубого топлива.
Как сообщил сегодня на пресс-конференции официальный представитель газового холдинга Сергей Куприянов, соответствующее письмо Газпром получил сегодня утром.
</div>

</body>
</html>


Спустя 12 минут, 41 секунда (22.06.2010 - 11:55) Basili4 написал(а):
у меня второй див имеет указанные размеры в px если он не вмещается на экране
он переносится

http://phpforum.ru/index.php?showtopic=30369&hl=

Спустя 2 минуты, 33 секунды (22.06.2010 - 11:57) Gesandte написал(а):
Цитата (qpayct @ 22.06.2010 - 08:30)
Да понятное дело, что такие вещи просто в пхп генерятся в style="<?php echo $flag['0'];?>"
меня озадачивает почему не сделали массивы и циклы именно для таблиц стилей, как в xsl? Удобно вот в таких ситуациях.

Ну впринципе наверно можно попробывать использовать тот же цикл из php в css, но при этом css помещать в хеадер, а не выносить в отдельный файл, Может прокатит, никода не требовалась так усложнять себе жизнь rolleyes.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style
type="text/css">
<?php

foreach ($element as $id)
echo "
div.element
$id {
/* style */
}
"
;
?>
</style>
</head>
<body>



Но это уже из разряда порнографии smile.gif

Спустя 20 часов, 43 минуты, 18 секунд (23.06.2010 - 08:40) userguest написал(а):
Gesandte, id действительно используется для javascript.
Вы сказали:
Когда данная проблема решается заданием общего класса для всех этих элементов.
Да это вариант, но классы у меня используются и в процессе выполнения кода javascript их удалаяет у объекта, поэтому я не могу их использовать для оформления, в начале я этого не упомянул, но этого и не требовалось, не обижайтесь, но зачем лезти в дебри, вопрос ведь был задан вполне конкретно:

Есть много блоков div c совершенно одинаковыми стилями, но с разными id.
Я попросил предложить краткий вариант этой записи:

DIV#identificator1.class, DIV#identificator2.class, DIV#identificator3.class, DIV#identificator4.class{стили
}

Более того, количество блоков div с новыми id и таким же стилем оформления будет увеличиваться и придется дописывать их вручную через запятую. Поэтому я и спросил "может как-то можно объединить их в одну группу, сдулать что-то вроде маски, ведь отличаться у всех будет только цифра".

Пользователь qpayct понял меня верно:

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

Только не классы - идентификаторы.


Спустя 1 час, 15 минут, 36 секунд (23.06.2010 - 09:56) qpayct написал(а):
Gesandte
так работать не будет. пхп - серверный язык. если уже делать то как я показал или извращатся по полной:
foreach($flag as $key => $val) {
$str_flags.= ".flag_". $key .", ";
$str_flags_pics.= "#flag_". $key ."{background:url('". $val ."');}";
}

$style_str = "<style>BODY{background:crimson;}".$str_flags."{float:left;}".$str_flags_pics ."</style>";

Спустя 7 минут, 47 секунд (23.06.2010 - 10:04) Gesandte написал(а):
userguest
1. Что могу сказать, хреновый значит у тебя javascript раз он классы удаляет. Вообще не понятно зачем так делать.
2. По крайней мере я не знаю как задать такую маску, хотя сомневаюь что на одном css это вообще реализуемо.
3. Изучай нижние 2 варианта

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style
type="text/css">
div[name=menu] {
background: rgb(220,220,220);
width: 20%;
}

div.wrapper {
margin: 25px 0 0 0;
}

div.wrapper > div {
background: rgb(220,130,150);
width: 20%;
}
</style>
</head>
<body>


<!-- Вариант 1. Порнография.... -->
<div id="menu1" name="menu">Menu 1</div>
<div
id="menu2" name="menu">Menu 2</div>
<div
id="menu3" name="menu">Menu 3</div>



<!-- Вариант 2. --->
<div class="wrapper">
<div
id="menu1">Menu 1</div>
<div
id="menu2">Menu 2</div>
<div
id="menu3">Menu 3</div>
</div>

</body>
</html>


Спустя 1 час, 45 минут, 52 секунды (23.06.2010 - 11:50) Gesandte написал(а):
qpayct, серьезно серверный??? А я думал интерпритатор в браузер встроен и код выполняется на стороне клиента.....и как же я все это время писал движок сайта..... biggrin.gif

Спустя 1 минута, 38 секунд (23.06.2010 - 11:51) qpayct написал(а):
оно и видно
Цитата
<style type="text/css">
<?php
foreach ($element as $id)
echo "
div.element$id {
/* style */
}
";
?>
</style>
да вы батенька фантаст biggrin.gif

Спустя 17 минут, 1 секунда (23.06.2010 - 12:08) Gesandte написал(а):
ну как те сказать) впринципе работает но несовсем))) сегодня решил попрбывать
Стиль применяется только к первому элементу, хотя при просмотре исходного кода страницы видны все элементы..но в то же в ремя в файрбаге на вкладке css, только 1 элемент, так и не понял че это такое, и ну его нафих smile.gif

Спустя 1 минута, 17 секунд (23.06.2010 - 12:10) Gesandte написал(а):

<?php

$menu = array('A', 'B', 'C', 'D');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title></title>
<
style type="text/css">
<?php
foreach ($menu as $id) {
echo "
div#menu"
.$id." {
background: rgb(220,130,150);
border-bottom: 1px solid rgb(240,240,240);
width: 20%;
"
;
}
?>
</style>
</
head>
<
body>

<?php
foreach ($menu as $id) {
echo "<div id=\"menu".$id."\">Menu $id</div>";
}
?>

</body>
</
html>

Спустя 15 минут, 10 секунд (23.06.2010 - 12:25) qpayct написал(а):
и этот человек написал CMS blink.gif

Спустя 10 минут, 19 секунд (23.06.2010 - 12:35) Gesandte написал(а):
biggrin.gif и еще там что то работает)))
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.