Вопрос относительно селекторов CSS

scorpiozzzxxx

Я хочу выбрать тег p. Если я использую селектор CSS h3 + p, выберет ли он тег, даже если тег находится внутри элемента div? пример

 h3 em {


*Selects all em tags inside h3 tags.


}


h3 + p {


*Selects the first p tag after a h3 tag.


}


a[title] {


*Selects all a tags that contain a title attribute.


}


a[title="Кликните сюда"] {


*Select exact match attribute with exact value.


}


a[title*="here"] {


*Select tag with 'here' in no particular order.


}

Код (разметка): несколько селекторов CSS, которые я изучаю.

 <div> <h3></h3> <p></p> </div>

Код (разметка): по какой-то причине я не могу выбрать элементы внутри div.

Я еще не изучил CSS с DIV.

Может быть, мне стоит просто подождать, пока я не доберусь до этого в книге, которую читаю.

Sveshnikova

Ага. Я за минимализм в разметке, но я также за совместимость... как правило, я все еще не доверяю этим новым селекторам. Конечно, учитывая ту чушь, которую они творят со спецификацией разметки, я почти готов к работе с W3C.

kazakhkyzy

Это то, что я имею в виду. Посмотрите на этот пример:

 <!DOCTYPE html>


<html lang="en-US"/>


<head>


<meta charset="UTF-8"/>


<style>


body {


background-color:yellow;


}


.box {


background-color:lightblue;


width:500px;


height:200px;


}


h1 + p {


font-family:verdana;


font-size:large;


}


</style>


<title>Random</title>


</head>


<body>


<div class="box">


<h1>Random</h1>


<p>Random, Rodom</p>


</div>


</body>


</html>

HTML: я не могу выбрать P и изменить его внутри div?? У меня это не работает?

pacan

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

но причудливые селекторы по-прежнему не «пригодны для развертывания в реальном мире» для пользовательских баз, с которыми мне приходится иметь дело за пределами медиа-запроса.

Я также придерживаюсь мнения, что если вам НУЖНО сделать что-то подобное с тегом типа абзаца, вы, вероятно, делаете что-то НЕПРАВИЛЬНО со своими абзацами.

Есть теги, с которыми я вижу законные причины сделать это - LI, TH, TD, DD - но такие теги, как P? Если это грамматический абзац, нет причин для его оформления, отличного от других грамматических абзацев, за исключением случаев, когда он находится в каком-либо теге, который меняет его значение (например, цитата), или сам контент получает стиль по какой-то причине (акцент).

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

Profit_PR

Я всегда использую ссылки href='/styles/style.css' которые сообщают браузеру перейти в корневую папку и работать с файлом. Это предотвращает мелкие неприятности, которые случаются время от времени.

odeskin

Сара абсолютно права. Делайте все простым и связанным. Если вы хотите добавить скрипты (PHP или JavaScript), вам не захочется биться головой о стену. Статическая HTML-страница не уведет вас далеко.

mcluhan

Я совсем не уверен насчет книги, над которой вы работаете, — она кажется очень длинной. Выбирать элементы внутри div легко.

Вы показали, как это делается на примере h3 em — хотя я бы не стал кодировать em внутри заголовка, но... допустим, у вас была такая разметка

 <style type='text/css'>
.mytable {

display: table;
}
.mytable div {

display: table-row;
}
.mytable div div {

display: table-cell;
}
</style>

Код (разметка): вы можете стилизовать его с помощью таких вещей.

 <div id='mytable'> <div> <div>stuff</div> <div>more stuff</div> </div> <div> <div>123</div> <div>456</div> </div> </div>

Код (разметка): Возможно, это не то, что вам нужно, и, возможно, было бы лучше иметь идентификатор или два для критических ячеек таблицы, но это будет работать и демонстрирует, как вы можете стилизовать что-то в своем div.

zuhair

Ну... такие вещи, как :first-of-type, постепенно деградируют - если вы используете браузер, созданный более 5 лет назад, или какое-то отсталое, старое несуществующее железо, которое не поддерживает ничего нового, чем IE7, тогда да, это не сработает, но и ничего не сломает - пользователь просто не получит другой стиль.

Угу.

carsarru

Потому что вы не всегда можете контролировать HTML, который выводится, но вы можете контролировать CSS.

Возьмите vBulletin в качестве примера

Программное обеспечение форума генерирует HTML-код, который является форумом, и помещает идентификаторы и классы там, где, по их мнению, это будет полезно, но (в прошлый раз мне приходилось что-то делать) я мог пропустить некоторые элементы, которые вы хотите стилизовать.

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

Вы можете найти подходящий сценарий и изменить его.

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

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

WordPress и Joomla будут иметь схожие функции, как и любой другой готовый скрипт, генерирующий HTML.

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

Елена Прянишникова

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

Возможно, вы захотите посмотреть атрибут nth of type, но он не поддерживается в старых браузерах.

На самом деле вам не следует рассматривать ни один из этих более сложных селекторов, пока вы не овладеете более простыми селекторами.

Не спешите выглядеть «круто» с помощью своего кода.

Вы можете быть удивлены тем, насколько редко вам действительно нужны модные вещи.

Когда вы это сделаете, посмотрите его, чтобы узнать подробности. г

ImNIK

Откуда вы их узнали? Всегда следует начинать с самого простого. Эти вещи не являются основами. Даже опытный может запутаться. Вы не можете выбрать h3 + p, поскольку тег не является дочерним для

.

И

Бла-Бла

недопустимо. Если вы просто хотите выбрать тег , это должно быть просто р {дисплей: блок; }, или что-то в этом роде. Отредактировано: знак плюса (соседний селектор) сложен: https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

Избегайте этого любой ценой.

Данил Абдрафиков

ketting00 только что доказал, что все работает нормально. Возможно, я просто связываю .css с заголовком HTML-кода. Я добавляю это в кодировку , а затем создаю style.css для добавления кода. Это выглядит правильно? С уважением, Крис

Bidin

Я бы не стал, если бы для этого не было веской причины. Трудно сказать по вашим примерам Допустим, вы работаете на сайте покинуть компанию приводят нового парня если он просматривает CSS и видит .виджет {} .виджет р {} он узнает, что эти два стиля связаны между собой и относятся к определенному типу контента. если он увидит .виджет{} .makethispurple {} он не узнает, что они используются вместе хотя ваши сайты могут быть вашими, через 6 месяцев, когда вы снова зайдете на свой код, у вас может возникнуть ощущение, что вы смотрите на код впервые.

positiv1

Кто-нибудь здесь действительно использует синтаксис css3? .box > п Для выбора конкретного элемента вы можете сделать несколько вещей.

Старым способом было бы добавить к нему класс и выбрать его по нему. если это все те же теги внутри родителя, например:

 
<div>

<blockquote>gregertg</blockquote>

<p>gertgertgert</p>

<p>gertgertger</p>
</div>

Код (разметка): Вы можете сделать div p:nth-child(2).

Вы всегда можете получить первое и последнее следующим образом:

div p: первый ребенок, div p: последний ребенок

или четные и нечетные

div p:nth-child(четный), div p:nth-child(нечетный)

если это смесь тегов, вы можете использовать n-й тип

  <div> <p>gregertg</p> <p>gertgertgert</p> <p>gertgertger</p> </div>

Код (разметка): div p:nth-of-type(2)

Вы можете получить практически все, что захотите, с помощью nth-child и nth-of-type.

div p:nth-child(3n+1)

выберет каждый третий тег p, начиная с первого (1,4,7,...), который также будет работать с n-м типом.

Я действительно считаю, что существует способ выбрать предыдущий элемент.

Что-то вроде p-h3 было бы здорово.

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

Kost9n

Будет нацелен на все P внутри .box - точно так же, как ".box h1" будет нацелен на все H1 внутри .box (я просто говорю, что на странице должно быть более одного h1)

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

skivskiv

Ч h3 + p выбирает первый абзац p после h3, поэтому

Не выбрано.

Выбрано. не внутри. Тот, у кого нет плюса, выбирает тег внутри тега. Я пытался выбрать элемент в примере div.

Привет

Очень длинный абзац. Но мне не удалось выбрать тег p однозначно.

Если я выполню P {color

lue;}, то все теги P будут выбраны.

Я пытаюсь использовать предварительный селектор, чтобы избежать еще большей путаницы в коде.

Я мог бы просто добавить атрибут class="paragraph" и использовать .paragraph и т. д... но я пытаюсь использовать предварительный селектор, чтобы избежать этого. Если вы понимаете, о чем я. :/

darky4

почему бы не попробовать

 div.box p { color: red; }

Код (разметка): Знакомы ли вы с инструментом проверки вашего браузера? Это может быть весьма полезно для получения имени селектора.

Похожие темы	Дата
Посоветуйте графическую станцию	19.10.2024, 18:10
Некорректное отображение меню в IE	19.10.2024, 18:10
Пожалуйста, помогите мне с моим HTML/CSS/JavaScript! (Параллакс-прокрутка)	19.10.2024, 18:10
Как удалить границу кнопки гамбургера CSS и пространство над ней	19.10.2024, 18:10
ищете идею плагина WordPress.?	19.10.2024, 18:10
Пожалуйста, помогите мне с этой маленькой проблемой CSS	19.10.2024, 18:10
Форма удостоверения личности	19.10.2024, 18:10
В чем суть блоггерства?	19.10.2024, 18:10
Плагин WordPress для этого — нужен немедленно	19.10.2024, 18:10
Изменение размера кнопки CTA и сохранение ее отзывчивости	19.10.2024, 18:10

Вопрос относительно селекторов CSS

scorpiozzzxxx

Sveshnikova

kazakhkyzy

pacan

Profit_PR

odeskin

mcluhan

zuhair

carsarru

Елена Прянишникова

.

И

Бла-Бла

ImNIK

Данил Абдрафиков

Bidin

positiv1

Kost9n

Не выбрано.

Привет

skivskiv

darky4

I AM

Интересно