Можем ли мы писать селекторы только по имени элементов в файле CSS

Question

Можем ли мы писать селекторы только по имени

Например,

<div name= "outer-name">
    <img name="inner-image" src="images/ine.jpg" alt"" />
</div>

Я хочу взять стиль inner-mage в файле css, например [external-name] [inner-image]

В файле CSS

[outer-name] [inner-image] {
    /*styles*/
}

Я не могу принять селектор как [external-name] img и т. Д., Выбирая только по имени

Answer 1

Вы можете использовать атрибуты селекторов:

[name="outer-name"] [name="inner-image"]

Но имейте в виду, что name не является допустимым атрибутом для <div> или <img>, даже если вышеуказанный селектор будет работать. Лучше всего либо изменить их на классы, либо, если вы используете HTML5, добавить к ним префикс data-, чтобы он выглядел так:

<div data-name= "outer-name">
    <img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>

Затем используйте этот селектор:

[data-name="outer-name"] [data-name="inner-image"]

Answer 2

С учетом следующего html:

<div data-name="something">
    <p>Content in 'something'</p>
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>

И CSS:

[data-name] {
    background-color: red;
}

[data-name] [data-someAttribute] {
    display: block;
    background-color: #ffa;
}

Это вполне допустимо (или, по крайней мере, реализовано в Chromium 14 / Ubuntu 11.04).Я изменил использование атрибутов name (поскольку они недопустимы для элементов div или других элементов, не являющихся form) и вместо этого использовал data-* префиксные пользовательские атрибуты, которые действительны в HTML5 ихотя, возможно, они и не «допустимы» в HTML 4, они, похоже, все еще понимают эти браузеры.

JS Fiddle demo .

Стоит отметить, что вы также можетеиспользуйте атрибут = равнозначная запись, чтобы выбрать только определенные элементы на основе значения их data-* атрибутов:

<div data-name="something">
    <p>Content in data-name='something' element.</p>
    <span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>

И CSS:

[data-name] {
    background-color: red;
}

[data-name="something"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

JS Fiddle demo.

Кроме того, если вам подходит CSS3, можно использовать запись атрибута начинается с (^=):

[data-name] {
    background-color: red;
}

[data-name^="s"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

JS Fiddleдемо .

И атрибут-заканчивается-с ($=) нотацией:

[data-name] {
    background-color: red;
}

[data-name$="ing"] {
    font-weight: bold;
}

[data-name] [data-someAttribute] {
    background-color: #ffa;
    text-decoration: underline;
    font-weight: normal;
}

Ссылки:

• data-*атрибуты (W3.org) .
• data-* атрибуты, (HTML5 Doctor) .
• селектор, равный атрибуту (W3.org).
• селекторы атрибутов, начинающиеся с и атрибуты, заканчивающиеся на (W3.org) .

Answer 3

Как сказал @Bolt, name там недействительно (но все равно работает в моем браузере). Вы можете использовать свойства HTML5 data-. Вот скрипка , показывающая, как это делается.

Реальным решением здесь будет использование классов, но я предполагаю, что у вас есть причина не использовать их.