Question

长期读者，第一次海报。

我使用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);
}

我发现了这个：https://stackoverflow.com/a/9795713/4774292说＆＃34; Id-selector。想要将样式应用于单个特定元素时很有用。＆＃34;

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

Answer 1

您现在使用的是一个类选择器，您需要做的是使用帖子中提到的id-selector。

作为一个类别的类的东西，并将id视为该类别中的个体。

但不是Id-selector HTML

ID选择器是CSS概念，而ID是HTML概念。 HTML用于描述您的文档，CSS用于根据描述设置文档样式。所以id，calss是描述，选择那些id就是你用CSS添加样式的方式。

这只是一些理论信息。现在让我告诉你如何在你的特定情况下进行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 
{
  ... 
}

这是您根据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 
{
  ... 
}

'＃'是您根据ID选择元素的方式。

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

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

而是添加一个单独的ID，然后用＃。

选择它

Answer 2

欢迎来到SO的精彩世界！

Id完全正确，我属于HTML元素。关于CSS的一个很酷的事情是它可以使用这些ID与HTML进行对话，而实际上也可以与类进行对话（还有其他的东西，但现在不要担心）。

CSS使用选择器选择特定的html元素。您可以将样式应用于这些选择器。要按ID选择，请添加＃。

例如，

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

可以在css中使用#doggie选择

。因此

#doggie {
  color: red;
}

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

将样式应用于您无法控制的HTML，这有点棘手。要找出id squarespace给出元素的内容（在chrome中），您应该右键单击要更改的内容并选择Inspect Element。它应弹出选中该元素的页面的html。通过查看该元素的HTML，你应该能够弄清楚如何在CSS中选择它。

您使用的标识符是静态的，这一点非常重要。如果每次加载页面时squarespace都会更改id或class，则css将无法继续工作。

有关css选择器的更多阅读：https://css-tricks.com/how-css-selectors-work/ 代码：http://www.codecademy.com/courses/web-beginner-en-XUclI/0/1

Answer 3

您需要使用inspect元素，但您需要特别对要更改的图像执行此操作，并定位data-image或data-image-id。那些应该是静态的。我不记得我的头顶是针对图像的，也是针对内容的，但其中一个应该是正确的。

Answer 4

我找到了问题的答案。谢谢所有提供答案的人，他们肯定有所帮助。这是我如何解决的，如果后来发现这不起作用，无论出于什么原因我都会更新。截至目前，这有效：

查看了来源。搜索“块 - ”。找到我想要选择的特定元素的块ID（它是一个图像）。以下是围绕它的编码：

</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将保留下来。从这篇文章中得到了这一部分：http://answers.squarespace.com/questions/50607/custom-css-div-id

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

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

干杯，

（PS。我会等到有人确认这个，然后才将其标记为此帖的最终答案。）

识别元素css

4 个答案: