Идентификационные элементы css

Question

долгое время читатель, впервые постер.

Я создал сайт, используя Squarespace. У меня вопрос о выборе конкретных элементов на странице.

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

.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image { 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    overflow: hidden; 
} 
.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    right: 0; 
    top: 0; 
    background: #2098d1; 
    height: 4px; 
    -webkit-transform: translateY(-4px); 
    transform: translateY(-4px); 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:hover:before, .sqs-block-image:focus:before, .sqs-block-image:active:before { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
} 

я нашел это: https://stackoverflow.com/a/9795713/4774292 говоря, что «Id-селектор Полезно, если вы хотите применить стиль к. единый конкретный элемент ".

Мой вопрос: как найти идентификатор отдельных изображений на странице для создания пользовательского css? Я чувствую, что это усложняется при использовании Squarespace или других платформ для разработки сайтов, подобных этому. Любая помощь была бы потрясающей. (Я должен был изучить это в колледже, а не в области искусств. * Sigh)

Answer 1

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

Просмотренный источник. Искал "block-". Найден идентификатор блока конкретного элемента, который я хотел выбрать (это было изображение). Вот что кодирование вокруг него выглядело как:

</div> 
</div></div></div></div><div class="sqs-block image-block sqs-block-image" data-block-type="5" id="block-yui_3_17_2_2_1428673541254_8999"><div class="sqs-block-content"> 
<div class="image-block-outer-wrapper layout-caption-below "> 

    <div class="intrinsic" style="max-width:2500.0px;"> 

      <div style="padding-bottom:75.0%;" class="image-block-wrapper has-aspect-ratio" data-description=""> 
       <noscript><img src="http://static1.squarespace.com/static/53c54097e4b009a27bdeec79/t/5527d477e4b079f2c38cc94b/1428673662307/group" alt="group" /></noscript><img class="thumb-image" alt="group" data-src="http://static1.squarespace.com/static/53c54097e4b009a27bdeec79/t/5527d477e4b079f2c38cc94b/1428673662307/group" data-image="http://static1.squarespace.com/static/53c54097e4b009a27bdeec79/t/5527d477e4b079f2c38cc94b/1428673662307/group" data-image-dimensions="2500x1875" data-image-focal-point="0.5,0.5" data-load="false" data-image-id="5527d477e4b079f2c38cc94b" data-type="image" /> 
      </div> 

Блок ID здесь:

block-yui_3_17_2_2_1428673541254_8999 

Так я вставил этот код в заголовке страницы:

<style> #block-yui_3_17_2_2_1428673541254_8999:hover { 
opacity: 0.7; 
-webkit-transition: all 300ms ease-out; 
-moz-transition: all 300ms ease-out; 
-o-transition: all 300ms ease-out; 
-ms-transition: all 300ms ease-out; 
transition: all 300ms ease-out; } 

#block-yui_3_17_2_2_1428673541254_8999 { 
-webkit-transform: translateZ(0); 
transform: translateZ(0); 
box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
-moz-osx-font-smoothing: grayscale; 
position: relative; 
overflow: hidden; 
} 
#block-yui_3_17_2_2_1428673541254_8999:before { 
content: ""; 
position: absolute; 
z-index: -1; 
left: 0; 
right: 0; 
top: 0; 
background: #2098d1; 
height: 4px; 
-webkit-transform: translateY(-4px); 
transform: translateY(-4px); 
-webkit-transition-property: transform; 
transition-property: transform; 
-webkit-transition-duration: 0.3s; 
transition-duration: 0.3s; 
-webkit-transition-timing-function: ease-out; 
transition-timing-function: ease-out; 
} 
#block-yui_3_17_2_2_1428673541254_8999:hover:before, 
#block-yui_3_17_2_2_1428673541254_8999:focus:before, 
#block-yui_3_17_2_2_1428673541254_8999:active:before { 
-webkit-transform: translateY(0); 
transform: translateY(0); 
} 
</style> 

Мой конечный результат: http://www.p2sk.ca/testing-grounds Обратите внимание, что блок группового фотоизображения имеет стиль, который я хочу (fade + синяя линия, появляющаяся при наведении), а не другие изображения. (Прошу прощения за неприятно большое изображение Торонто Клен Лифс).

Разница между элементом yui и элементом block-yui в Squarespace заключается в том, что (насколько я могу судить, исправьте меня, если я ошибаюсь) элемент block-yui не изменяется. Это статично. Таким образом, ваш CSS останется. Получил эту часть с этой должности: http://answers.squarespace.com/questions/50607/custom-css-div-id

Я тестировал страницу: 1) постоянно обновлялся 2) закрывал браузер и снова открывал 3) перемещая выбранный блок изображения в другую часть страницы 4) все вышеперечисленное в разных комбинации.

Блок-yui ID не изменился. Желаемый эффект остался. * Вытирает пот

Приветствия,

(PS.Я подожду, пока кто-то не подтвердит это, прежде чем пометить его как окончательный ответ на этот пост.)

Answer 2

Добро пожаловать в прекрасный мир публикации на SO!

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

CSS выбирает определенные элементы html с помощью селекторов. Вы можете применять стили к этим селекторам. Чтобы выбрать по id, вы добавите #.

Например,

<div id="doggie">Dog</div> 

могут быть выбраны с помощью #doggie в CSS. Таким образом

#doggie { 
    color: red; 
} 

будет применять красный шрифт текста в элементе с идентификатором doggie.

Применение стиля к html, который вы не можете контролировать, немного сложнее. Чтобы узнать, что id squarespace дает элемент (в хроме), вы должны щелкнуть правой кнопкой мыши вещь, которую хотите изменить, и выбрать Inspect Element. Он должен вывести html для страницы с выбранным элементом. Посмотрев на html этого элемента, вы должны выяснить, как его выбрать в CSS.

Важно, чтобы используемый вами идентификатор был статичным. Если квадрат меняет id или класс каждый раз, когда страница загружается, css не будет продолжать работать.

Больше чтения на CSS селекторов: https://css-tricks.com/how-css-selectors-work/ codeacademy: http://www.codecademy.com/courses/web-beginner-en-XUclI/0/1

Answer 3

То, что вы используете в настоящее время называется селектором класса и то, что вам нужно сделать, это использовать ID-селектор, как указано на пост.

Вещь класса как категории и определение идентификатора как отдельного лица в пределах категории.

но не Id-селектор HTML

селектор ID является концепция CSS в то время как идентификаторы являются концепции HTML.HTML для описания вашего документа и CSS предназначен для стилизации вашего документа на основе описания. Таким образом, id, calss - это описания и выбор этих идентификаторов - это то, как вы добавляете стили с CSS.

Это просто теоретическая информация. Позвольте мне теперь показать вам, как делать идентификацию в вашем конкретном случае.

Это то, что у вас есть:

.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image { 
    ... 
} 

.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:before { 
    ... 
} 

.collection-54d92b4ee4b0661469eb9a15 .sqs-block-image:hover:before, .sqs-block-image:focus:before, .sqs-block-image:active:before 
{ 
    ... 
} 

Это, как вы выбрали его на основе идентификаторов

.collection-54d92b4ee4b0661469eb9a15 #sqs-block-image { 
    ... 
} 

.collection-54d92b4ee4b0661469eb9a15 #sqs-block-image:before { 
    ... 
} 

.collection-54d92b4ee4b0661469eb9a15 #sqs-block-image:hover:before, #sqs-block-image:focus:before, #sqs-block-image:active:before 
{ 
    ... 
} 

«#», как вы выбираете элементы на основе их ID.

Затем вам также нужно перейти к элементу HTML и изменить его идентификатор как sqs-block-image или что-нибудь еще, что вы хотите.

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

Вместо этого добавьте отдельный идентификатор, а затем выберите его с помощью #.

Answer 4

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