2013-03-28 4 views
4

Мне интересно, возможно ли это: у меня есть id, определенный в css в этой форме.простой css трюк - возможно ли это?

#close{ 
    font-size:11px; 
    text-decoration: underline; 
} 

#close:hover{ 
    cursor: pointer; 
} 

, но здесь я должен повторить определение этого идентификатора просто добавить hover событие. есть ли возможность сделать что-то подобное?

#close{ 
    font-size:11px; 
    text-decoration: underline; 
}:hover{cursor: pointer;} 

это позволит сэкономить дополнительные печатать ..

ответ

6

Вы не можете сделать это в CSS, однако вы можете найти CSS preprocessers как SASS или LESS интересной. Они позволяют вам следующие селекторы, увидеть этот пример в SASS:

.some-div { 
    #close { 
     font-size:11px; 
     text-decoration: underline; 

     &:hover { 
      cursor: pointer; 
     } 
    } 
} 

Это компилирует:

.some-div #close { 
    font-size:11px; 
    text-decoration: underline; 
} 
.some-div #close:hover { 
    cursor: pointer; 
} 

Обратите внимание, что они не поддерживаются браузерами, вы получаете программы компилировать, который выводит CSS для включения в свою веб-страницу.

+0

css с таким видом имущества было бы здорово! но SASS немного утомительно для импорта на страницу .. – doniyor

+0

@doniyor В этом случае альтернативы нет. Я бы рекомендовал использовать монитор файловой системы, чтобы автоматически конвертировать ваши .scss-файлы в .css (проверить LiveReload: http://livereload.com/) или использовать плагин для вашей среды разработки, который компилируется при сохранении. Есть много доступных для Visual Studio. –

+0

Я использую Mindscape WebWorkbench для Visual Studio, и он отлично работает.Делает писать CSS так приятно :) ищите плагины для своей среды IDE, я считаю, что есть куча. –

2

хорошо, в данном конкретном случае вы можете просто

#close{ 
    font-size:11px; 
    text-decoration: underline; 
    cursor: pointer; 
} 

в качестве указателя отображается только в том, когда вы парящий в любом случае;)

В противном случае я не считаю, что есть какие-либо синтаксические приемы, но вы можете использовать препроцессор как SASS

+0

да, я могу это сделать, но мой случай - всего лишь примерный случай, что, если вы хотите больше вещей на '' hover'' .. я надеюсь , люди работают над этим. :( – doniyor

+0

Я чувствую вашу боль. SASS хорош, если у вас крупные проекты - но часто у меня небольшие проекты, которые не оправдывают этого, и было бы неплохо иметь синтаксис, подобный тому, который вы упомянули^ – Mupps

+0

отличная точка в указателе ! да, каламбур предназначен LOL – galdikas

1

Никто не работает над этим в W3C CSS Рабочей группы, насколько я могу сказать (*)

Там вы:

  • препроцессора (см других ответов)
  • есть копия-склеивание,
  • может быть CSS ZenCoding/Эммет плагин (никогда не слышал о нем, хотя и это не нужно так сильно, как Эмметты для HTML)
  • может быть макрос, как «идти копировать последнюю строку моего файла CSS с { в его конце и предыдущие строки, если они заканчиваются запятой»
  • и есть методики, как OOCSS, BEM, и т.д., которые будут держать необходимость вложенности селекторов вниз на 1 или 2 уровня, то есть только pseudos и время от времени второго класса (едва не идентификатор, используются только классы)

(*) Это едва необходимо в браузер imo. Сухие вещи в CSS, о которых я могу думать, - это классы, :matches() (previously known as :-vendor-any()) и наследовать, начальные значения, «переменные» и новое свойство all (все это связано только с тем, что они избегают более длинных задач, это совершенно не связано с вашим вопросом;))

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