Главная → Программирование → by

Укрощение Расширенный Селекторы CSS

CSS является одна из самых мощных tools, которое доступно для веб-дизайнеров (если не самый мощный).С его помощью можно полностью преобразить внешний вид сайта всего за пару минут, и даже без необходимости прикасаться к разметке.Но несмотря на то, что мы все хорошо осведомлены о его полезности, CSS селекторы еще не используется в полной мере, и мы иногда имеют тенденцию к подстилке наш HTML чрезмерного и ненужного классов и идентификаторов, дивы и spans.

Лучший способ избежать этих язв распространение в разметке и держать его в чистоте и семантическая, заключается в использовании более сложных CSS селекторов, те, которые могут ориентироваться на конкретные элементы без необходимости класс или идентификатор, и, делая это, сохранить наш код и наши стили flexible.

CSS Specificity

Прежде чем углубиться в сферу передовых селекторы CSS, it’ важно понять, как работает CSS специфику, так что мы знаем, как правильно использовать наши селекторы и, чтобы избежать нам тратить часы отладки для выпуска CSS, которые могут быть легко исправлены, еслимы только заплатили внимание на specificity.

Когда мы пишем наш CSS мы должны иметь в виду, что некоторые селекторы будут считаться higher чем другие в каскаде, последний селектор, который мы писали не всегда отменяют предыдущие, которые мы написали для тех же элементов.

Итак, как вы расчета specificity конкретного выбора?It’ с довольно простым, если принять во внимание, что специфика будет представлен в виде четырех чисел, разделенных запятыми, например: 1, 1, 1, 1 или 0, 2, 0, 1

  1. Первая цифра () всегда равен нулю, если есть атрибут стиля применяется к этому элементу в разметке itself
  2. Вторая цифра (б) сумма количество идентификаторов в том, что selector
  3. Третья цифра (с) сумма других селекторов атрибутов и псевдо-классов в том, что селектор.Классы (.example) и селекторы атрибутов (например, li[id=red]) включены here.
  4. Четвертая цифра (D) подсчитывает элементы (например, table p div и т.д.) и псевдо-элементы (например, :first-line)
  5. Универсальный селектор (*) имеет специфику zero
  6. Если два селектора имеют одинаковую специфичность, тот, который идет на последнем месте таблицы стилей будет applied

Let’ посмотрим на несколько примеров, чтобы сделать его проще для понимания:

  • #sidebar h2 — 0, 1, 0, 1
  • h2.title — 0, 0, 1, 1
  • h2 + p — 0, 0, 0, 2
  • #sidebar p:first-line — 0, 1, 0, 2

От следующего селектора, первый это тот, кто будет применяться к элементу, потому что он имеет более высокую специфичность:

  • #sidebar p#first { color: red; } — 0, 2, 0, 1
  • #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

It’ важно иметь хотя бы общее представление о том, как специфика работы, но инструменты, такие как Firebug полезны, чтобы позволить нам знать, какой селектор применяется к конкретному элементу, перечисляя все CSS селекторы в порядке их специфичности, когда вы проверяете element.

Firebug позволяет легко увидеть, какой селектор применяется к element.

Полезные ссылки:

1.Характеристики selectors

Селекторы атрибутов позволяют целевой элемент на основе его атрибутов.Вы можете задать element’ с атрибутом только, так что все элементы, которые have этого атрибута — независимо от значения — в HTML будут направлены, либо быть более конкретным и целевых элементов, которые имеют особое значение на ихattributes — и это где селекторы атрибутов показать свои power.

Есть 6 различных типов селекторов атрибутов:

  • [att=value]Атрибут должен иметь точное значение specified.
  • [att~=value]Attribute’ S значение должно быть разделенных пробелами список слов (например, класс = ” название признакам home”), и одно из слов точно указанное value.
  • [att|=value]Attribute’ S значение именно “ value” или начинается со слова “ value” и сразу же следует “-”, так что было бы “ стоимость ”.
  • [att^=value]Attribute’ S значение начинается с указанной value.
  • [att$=value]
    attribute’ S значение концы с указанным value.
  • [att*=value]
    attribute’ S значение содержит указанную value.

Например, если вы хотите изменить цвет фона всех дел элементов, которые являются posts на Вашем блоге, Вы можете использовать селектор атрибута, предназначенного для каждого div которого class Атрибут начинается с “после ”: 

div[class*="post"] {
	background-color: #333;
	}

Это будет соответствовать всем div элементов, атрибутов класса содержит слова “ posts”, в любом position.

Еще одно полезное использование селекторов атрибутов является целевой различных типов input elements.Например, если вы хотите, чтобы ваша ввода текста, чтобы иметь различную ширину от других, вы можете использовать простой селектор атрибута: 

input[type="text"] {
	width: 200px;
	}

Это будет нацелен на все input элементов, type атрибут именно “ text”.

Сейчас let’ Скажем вы хотите добавить другойзначок рядом с каждой другой тип file ваш сайт ссылается на, так что ваш website’ с посетителями знать, когда they’ получу изображений, PDF файл, документ Word, и т.д. Это может быть сделано с помощью атрибута селектора:

a[href$=".jpg"] {
	background: url(jpeg.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
	
a[href$=".pdf"] {
	background: url(pdf.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}
	
a[href$=".doc"] {
	background: url(word.gif) no-repeat left 50%;
	padding: 2px 0 2px 20px;
	}

В этом примере we’ уже использовали селектор атрибутов, которые будут ориентированы все ссылки (a) которого href атрибут концы ($) с JPG, PDF или doc.

Заметки о браузере support
кроме Internet Explorer 6, все основные браузеры поддерживают селекторы атрибутов.Это означает, что когда вы используете атрибут селектора на таблицы стилей, вы должны убедиться, что пользователи IE6 все еще будет предусмотрено с полезной site.Возьмите наш третий пример: добавление значок, чтобы ваши ссылки добавляет еще один уровень юзабилити вашего сайта, но сайт все равно будет полезной, если ссылки don’ т показать любой icons.

2.Ребенка selector

Дочерний селектор представлен знаком “> ”.Она позволяет целевых элементов, которые являются прямыми потомками частности element.

Например, если вы хотите, чтобы соответствовать всем h2 элементов, которые являются прямым потомком боковой панели div, но не h2 элементов, которые могут быть также в пределах div, но которые являются внуками (или более поздней версии потомков) вашего элемента, вы можете использовать этот селектор: 

div#sidebar > h2 {
	font-size: 20px;
	}

Вы также можете использовать оба ребенка и селекторы потомков, вместе взятых.Например, если вы хотите быть настроен только на blockquote элементов, которые находятся в пределах дивы, которые являются прямыми внуков body элемента (вы, возможно, захотите, чтобы соответствовать цитат внутри основному содержанию div, но не тогда, когда они находятся за пределами его): 

body > div > div blockquote {
	margin-left: 30px;
	}

Заметки о браузере support
Мне нравится селекторы атрибутов, ребенок селектор не поддерживается Internet Explorer 6.Если эффект, который вы пытаетесь достичь с помощью очень важно для website’ с юзабилити или общей эстетики, вы можете рассмотреть возможность использования селектора класса с ней, или на IE только стиль, но это будет отвлекать от цели использованияРебенок selectors.

3.Родного брата combinators

Есть два вида родственных комбинаторов: adjancent комбинаторы брат и общие брат combinators.

Прилегающих брат combinator

Этот селектор использует знак плюс, “ ”, чтобы объединить две последовательности простых селекторов.Элементов в селекторе есть же parent, и второй должен прийти сразу после first.

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

p + h2 {
	margin-top: 10px;
	}

Вы можете быть еще более конкретным и сказать, что вы только хотите это правило применяется, если элементы находятся в пределах конкретного div: 

div.post p + h2 {
	margin-top: 10px;
	}

Или выМожно добавить еще один уровень сложности: скажем, вы хотите, чтобы первая строка из пунктов на каждой странице, чтобы быть в небольшом caps.

.post h1 + p:first-line {
	font-variant: small-caps;
	}

Потому что вы знаете, что первым пунктом каждое сообщение немедленно следует h1 теги, вы можете обратиться к h1 на selector.

Общие брат combinator

Общие брат комбинатора работает почти так же, как соседние брат комбинатора, но с той разницей, что Второй селектор не должны следовать сразу за первым one.

Итак, если вы должны быть ориентированы на все p теги, которые находятся в пределах конкретного div, и что следовать h1 теги (вы можете те p Теги быть больше, чем те, которые приходят перед названиемиз вашего поста), вы можете использовать этот селектор: 

.post h1 ~ p {
	font-size: 13px;
	}

Заметки о браузере support
Internet Explorer 6 не понимает брата комбинаторов, но, как и для других случаев, если ваша аудитория включает в себя небольшой процент пользователей IE6, и если макет веб-сайта не сломаны илисерьезно пострадали от ее отсутствия поддержки, это гораздо более простой способ достижения крутые эффекты без необходимости загромождать HTML бесполезными классов и ids.

4.Псевдо-classes

Динамические псевдо-classes

Это так называемые динамические псевдо-классы, потому что они на самом деле не существуют в HTML: они присутствуют только когда пользователь находится или имеет interacted с website.

Есть два типа динамических псевдо-классы: link __ и 6 | Пользователь action них.Ссылка составляют :link и :visited, а те действия пользователя составляют :hover :active и :focus.

От всех селекторов CSS, упомянутые в этой должности, это, вероятно, будет те, которые наиболее часто used.

:link псевдо-класс применяется к ссылкам, которые еще не посещал пользователь, в то время как :visited псевдо-класс применяется к ссылкам, которые были посещены, таким образом, они взаимноexclusive.

:hover псевдо-класс применяется, когда пользователь перемещает курсор мыши на элемент, без того, чтобы активировать или щелкните по нему. :active псевдо-класс применяется, когда пользователь нажимает на самом деле элемент.И, наконец, :focus псевдо-класс применяется, когда этот элемент находится в фокусе — наиболее распространенных приложений на форму elements.

Вы можете использовать более одного действия пользователя динамический псевдо-класса в вашей таблицы стилей, поэтому вы можете иметь, например, различные цвета фона для поля ввода в зависимости от того курсор пользователя только над ней или над ней в то время какВ фокусе: 

input:focus {
	background: #D2D2D2;
	border: 1px solid #5E5E5E;
	}
	
input:focus:hover {
	background: #C7C7C7;
	}

Заметки о браузере support
динамический псевдо-классы поддерживается всеми современными браузерами, даже IE6.Но имейте в виду, что IE6 только позволяет :hover псевдо-класса должны применяться к ссылке элементов (a), и только IE8 принимает :active состояние на другие элементы, помимоlinks.

: Первый child

:first-child псевдо-класс позволяет настраивать таргетинг элемент, который является Первый ребенок из другого element.Например, если вы хотите добавить верхнее поле в первые li элемент вашего маркированных списков, вы можете иметь это: 

ul > li:first-child {
	margin-top: 10px;
	}

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

#sidebar > h2 {
	margin-top: 10px;
	}
	
#sidebar > h2:first-child {
	margin-top: 0;
	}

Заметки о браузере support
IE6 не поддерживает :first-child псевдо-класса.В зависимости от конструкции, что псевдо-класс применяется к, она не может быть основной причиной для беспокойства.Например, если вы используете :first-child селектора для удаления верхнего или нижнего поля из заголовков или абзацев, макет, вероятно, не ломаются в IE6, то это будет только смотреть красивый разные.Но если вы используете :first-child селектора для удаления левого и правого поля от, например, размещенных последовательность дивы, которые могут привести к более сбоев в работе designs.

Язык псевдо-class

Язык псевдо-класса, :lang() , позволяет сопоставить элемента на основе его language.

Например, предположим, что вы хотите конкретную ссылку на ваш сайт, чтобы иметь другой цвет фона, в зависимости от языка, страницы: 

:lang(en) > a#flag {
	background-image: url(english.gif);
	}
	
:lang(fr) > a#flag {
	background-image: url(french.gif);
	}

Селекторы будет соответствовать конкретной ссылки, если язык страницы либо равно “ан” или “FR” или если оно начинается с “ан” или “FR” и сразу после “-”

Заметки о браузере support
Не удивительно, что единственная версия Internet Explorer, который поддерживает этот селектор 8.Все другие основные браузеры поддерживают язык псевдо-selector.

5.CSS 3 Псевдо-classes

: Target

Когда вы связи с использованием фрагмента identifiers (например, http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments, где “# комментарии” является идентификатором фрагмента), вы можете стиле целевой с помощью :target псевдо-class.

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

h2:target {
	background: #F2EBD6;
	}

Заметки о браузере support
На этот раз, Internet Explorer действительно раздражает и не имеет никакой поддержки на всех на :target псевдо-класса.Другой глюк в том, что опера не поддерживает этот селектор при использовании кнопки Назад и Вперед.Кроме этого, он имеет поддержку со стороны других крупных browsers.

Элемент пользовательского интерфейса состояния псевдо-classes

Некоторые HTML элементы имеют включить или отключить состояние (например, поля ввода) и зарегистрированный или незарегистрированный государств (радио-кнопок и флажков).Эти состояния могут быть направлены на :enabled , :disabled или :checked псевдо-классы, respectively.

Таким образом, можно сказать, что любое input, что отключена должны иметь светло-сером фоне и пунктирной границей: 

input:disabled {
	border:1px dotted #999;
	background:#F2F2F2;
	}

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

input[type=”checkbox”]:checked {
	margin-left: 15px;
	}

Заметки о браузере support
Все ос …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.