Можно ли настроить «нет цели» в CSS?

Есть ли селектор css для «отсутствия идентификатора фрагмента»? Противоположность :target.Можно ли настроить «нет цели» в CSS?

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

Так выглядит эта

<style> 
section {display:none} 
section:target {display:block} 
</style> 

<body> 
<section id="one">The first block (showing with #one)</section> 
<section id="two">The second block (showing with #two)</section> 
<section id="three">The third block (showing with #three)</section> 
</body>

И пользователь видит первый раздел, если он отображается с document.html#one на панели местоположения и т.д.

Идея заключается в том, что браузер будет кэшировать страницу HTML (поскольку это просто статический html), и никакой другой контент не должен загружаться при отображении другого блока текста, что минимизирует нагрузку на сервер.

Но файл выглядит тупо пустым, когда вы вызываете его без идентификатора фрагмента, поэтому я задаюсь вопросом, есть ли способ сделать все это видимым в этом случае без каких-либо скрытых разделов. Только CSS, обработка JS или серверной стороны; иначе это не будет статический HTML!

Редактировать:
В отличие от предлагаемых дубликатов, я хотел бы просто показать весь документ, если нет идентификатора фрагмента, а не только одного элемента в частности.
Другими словами, по умолчанию (при отсутствии каких-либо #) должен показывать все; только если там is a # должно быть скрыто все, кроме цели.
Дубликаты вообще не затрагивают эту ситуацию.

источник

2016-06-27 Mr Lister

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

@BramVanroy В этом конкретном случае использования я несколько раз ссылаюсь на файл с сайта с разными идентификаторами фрагментов. Таким образом, он будет загружен только один раз (по крайней мере, я надеюсь), и в первый раз он будет поступать из кеша пользователя. –

См. [Мой комментарий к одному из предложенных дубликатов] (http://stackoverflow.com/questions/3354279/default-target-with-css#comment46876088_3354279). Поскольку: target pseudo соответствует целевому элементу, что вы ожидаете от соответствия «противоположность: цель», когда * не является целевым элементом *? – BoltClock

с некоторой дополнительной разметкой и более подробными и конкретными CSS для написания, чтобы избежать javascript. Нуждается в обновлении каждый раз, когда обновляется структура HtML.

:target ~section { 
 
    display:none; 
 
} 
 
#one:target ~.one, 
 
#two:target ~.two, 
 
#three:target ~.three { 
 
    display:block; 
 
}

<nav> 
 
    <a href="#one">One</a> 
 
    <a href="#two">Two</a> 
 
    <a href="#three">Three</a> 
 
    <a href="#">None of below targets</a> 
 
</nav> 
 
<!-- html anchor to allow use of :target ~ selectors --> 
 
<a id="one"></a> 
 
<a id="two"></a> 
 
<a id="three"></a> 
 
<!-- end anchor --> 
 
<section class="one">The first block (showing with #one)</section> 
 
<section class="two">The second block (showing with #two)</section> 
 
<section class="three">The third block (showing with #three)</section>

источник

2016-06-27 20:16:01

Отлично работает, большое вам спасибо! –

Можно ли настроить «нет цели» в CSS?

ответ

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