css - 识别元素 css

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说“Id-selector。当你想将样式应用于单个特定元素时很有用。”

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

Answer 1

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

Thing of class 作为一个类别，并将 id 视为类别中的一个个体。

but isn't Id-selector HTML

ID 选择器是 CSS 概念，而 ids 是 HTML 概念。 HTML 用于描述您的文档，而 CSS 用于根据描述设置文档样式。所以 id、calss 是描述，选择这些 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 
{
  ... 
}

这是根据 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，然后使用 # 选择它。