识别元素 css

Identifying elements css

好久了reader,第一次发贴。

我使用 Squarespace 创建了一个网站。我对在页面上选择特定元素有疑问。

在包含多张图片的页面上,我试图仅在其中一张图片上应用悬停。但我无法仅选择 1 张图像。我目前使用的自定义 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);
}

我发现了这个: 说 "Id-selector. Useful when you want to apply styling to a single specific element."

我的问题是:如何在页面上找到单个图像的 ID 以创建自定义 css?我觉得这在使用 Squarespace 或其他类似网站开发平台时变得更加困难。任何帮助都是极好的。 (我应该在大学而不是艺术学位学习这个。*叹息)

欢迎来到在 SO 上发帖的精彩世界!

您完全正确,Id 属于 HTML 个元素。 CSS 的一个很酷的事情是它可以使用这些 ID 与 HTML 交谈,而且 class 实际上也是如此(还有其他事情,但现在不要担心这个).

CSS selects 特定的 html 元素使用 select 或。您可以将样式应用到那些 select 或。要按 id select,您需要在前面加上 #.

例如,

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

可以在 css 中与 #doggie 进行 select 编辑。于是

#doggie {
  color: red;
}

将红色字体应用于 ID 为 doggie 的元素中的文本。

将样式应用到您无法控制的 html 有点棘手。要找出 id squarespace 给元素(在 chrome 中)你应该右键单击你想要更改的东西然后 select Inspect Element。它应该为包含该元素 selected 的页面弹出 html。通过查看该元素的 html,您应该能够弄清楚如何在 CSS.

中 select 它

重要的是您使用的标识符是静态的。如果 squarespace 在每次加载页面时更改 id 或 class,则 css 将无法继续工作。

更多阅读 css select 或者:https://css-tricks.com/how-css-selectors-work/ 代码学院:http://www.codecademy.com/courses/web-beginner-en-XUclI/0/1

您现在使用的是 class selector,您需要做的是使用 id-selector,如 post 中所述。

class 的事物作为一个类别,并将 id 视为类别中的一个个体。

but isn't Id-selector HTML

ID selector 是 CSS 概念,而 ids 是 HTML 概念。 HTML 用于描述您的文档,CSS 用于根据描述设置文档样式。所以 id、calss 是描述,selecting 这些 id 是你如何使用 CSS.

添加样式

这只是一些理论信息。现在让我向您展示如何在您的特定情况下执行 id-selection。

这是你拥有的:

.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 
{
  ... 
}

这就是你select它基于 ID 的方式

.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 
{
  ... 
}

'#' 是 select 元素基于其 ID 的方式。

然后您还需要转到 HTML 元素并将其 ID 更改为 sqs-block-image 或您想要的任何其他内容。

我实际上建议选择另一个名称 - 更具体,因为这个名称对所有图像都是通用的,所以你不想弄乱它。

而是添加一个单独的 ID,然后 select 使用 #.

您需要使用 inspect 元素,但您需要专门针对要更改的图像执行此操作,并以 data-image 或 data-image-id 为目标。那些应该是静态的。我不记得哪个以图像为目标,哪个以内容为目标,但其中一个应该是正确的。

我找到了问题的答案。感谢所有提供答案的人,他们绝对有帮助。这是我解决的方法,如果后来发现这不管出于什么原因都不起作用,我会更新。截至目前,这有效:

已查看来源。已搜索 "block-"。找到我想要的特定元素的块 ID select(它是一个图像)。这是它周围的编码:

</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 注意集体照片图像块如何具有我想要的样式效果(淡入淡出 + 悬停时出现蓝线),而不是其他图像。 (我很抱歉多伦多枫叶队那张令人讨厌的大照片)。

Squarespace 中 yui 元素和 block-yui 元素的区别在于(据我所知,如果我错了请纠正我)block-yui 元素不会改变。它是静态的。所以你的 CSS 会保留下来。从这个 post 得到那部分:http://answers.squarespace.com/questions/50607/custom-css-div-id

我通过以下方式测试页面:1) 不断刷新 2) 关闭浏览器并重新打开 3) 将 selected 图像块移动到页面的不同部分 4) 以上所有不同的组合。

block-yui ID 没有改变。期望的效果仍然存在。 *擦汗

干杯,

(PS。我会等到有人确认之后再将其标记为此 post 的最终答案。)