识别元素 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 的最终答案。)
好久了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.
重要的是您使用的标识符是静态的。如果 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 的最终答案。)