Какой селектор CSS использовать? - PullRequest
Новая
       5

Какой селектор CSS использовать?

1 голос
/ 02 февраля 2011

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

<h2 class='page-title'> {title} </h2>

, где {title} динамически генерируется приложением.поэтому у меня будет по одному на каждой странице моего сайта, созданного по тому же шаблону.

  1. О странице: <h2 class='page-title'>About</h2>
  2. Страница услуг: <h2 class='page-title'>Service</h2>
  3. Домашняя страница: <h2 class='page-title'>Home</h2>

Что яЯ хочу сделать это, чтобы скрыть это от 3. Домашней страницы, но позволить ей отображаться на всех других страницах, используя CSS или Javascript.Я тупо пытался h1 {display:none} но это просто все скрывает, я только хочу скрыть <h2 class='page-title'>Home</h2>

Есть идеи, как это сделать?

Ответы [ 5 ]

3 голосов
/ 02 февраля 2011

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

h2.page-title { 
  display:none;
}
1 голос
/ 02 февраля 2011

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

Если это невариант, я бы предложил способ Мела, так как он будет просто работать, и нет необходимости в javascript.

Также я думаю, что код Мела должен быть выше h2, который вы хотите скрыть, и заключен в <style></style>теги.

1 голос
/ 02 февраля 2011

Если у вас есть CMS или что-то похожее, выкладывающее контент в один шаблон, то я думаю, вам лучше использовать javascript для этого.Я не знаю селектора в css для innerText элемента.

Я обычно использую библиотеку jquery - я бы порекомендовал что-то вроде: 

$(document).ready(function() { 
    $("h2.page-title:contains('Home')").css('display', 'none'); 
}
1 голос
/ 02 февраля 2011

Я бы дал вашему <html> элементу идентификатор (уникальный для каждой страницы): 

<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>

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

#home .page-title { display: none }
1 голос
/ 02 февраля 2011

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

h2.page-title - это очень специфический способ выбора элемента, но он повлияет на все страницы.

.page-title может сработать, если вы знаете, что класс может произойти только с элементом h2.

Если вы используете класс для тела, вы можете сделать следующее: 

body.frontpage h2.page-title

или body.frontpage .page-title в зависимости от того, насколько конкретно вы хотите быть.

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

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

Нет похожих вопросов

...