搜索 收起
您的位置  > 互联网

9年前的CSS3选择器使用方法，你get到了吗？

chanong 发布于 2024-02-07 19:02:20 阅读()

乔彭 9年前

您可能已经阅读过“id”、“class”和“选择器”，并且正在使用它们，因此您正在选择一种具有更高灵活性的方法。 本文提到的大多数选择器都遵循CSS3标准，因此它们只能在相应浏览器的最新版本中生效。 你应该把这些记在你聪明的头脑里。

1.*

* {    margin: 0;    padding: 0;  }

在我们研究更高级的选择器之前，我们应该认识一下众所周知的清除选择器。 星号将选择页面上的每个元素。 许多开发人员使用它来清除``和``。 当然练习时可以使用这个，但我不建议在生产环境中使用它。 它给浏览器添加了很多不必要的东西。

“*”也可用于选择元素的所有子元素。

#container * {    border: 1px solid black;  }

它将选择“#”下的所有元素。 当然，如果可以的话我还是不建议你使用它。

演示版

兼容性

2.#X

#container {     width: 960px;     margin: auto;  }

在选择器中使用“#”通过 id 定位元素。 大家平时都是这样使用的，使用的时候还是要非常小心。

你需要问自己：我是否必须为这个元素分配一个 id 才能找到它？

`id` 选择器非常严格，您不能重复使用它。 如果可能，请首先尝试使用标签名称、HTML5 中的新元素或伪类。

演示版

兼容性

3..X

.error {    color: red;  }

这是一个“类”选择器。 它与“id”选择器的不同之处在于它可以定位多个元素。 当您想要设置多个元素的样式时，可以使用“class”。 当您想要修改特定元素时，请使用“id”来定位它。

演示版

兼容性

4.XY

li a {    text-decoration: none;  }

下一个常用的是``选择器。 如果您想更具体地定位元素，可以使用它。 例如，如果您不需要定位所有“a”元素，而只需定位“li”标签下的“a”标签，该怎么办？ 这时候就需要用到``选择器了。

专业提示：如果您的选择器看起来像“XYZA B.error”，那么您就做错了。 时刻提醒自己是否真的需要修改这么多元素。

演示版

兼容性

5.X

a { color: red; }  ul { margin-left: 0; }

如果您想定位页面上的所有标签，而不是使用“id”或“class”，这很简单，只需使用类型选择器即可。

演示版

兼容性

6. X: 和 X: 链接

a:link {color:red;}  a:visited {color: purple;}

我们使用`:link`伪类来定位所有尚未访问过的链接。

此外，我们还使用`:`来定位所有已访问过的链接。

演示版

兼容性

7.X+Y

ul + p {     color: red;  }

这称为相邻选择器。 它指导选择指定元素的直接后继元素。 上面的示例选择所有“ul”标签后面的第一个段落，并将其颜色设置为红色。

演示版

兼容性

8.X>Y

div#container > ul {    border: 1px solid black;  }

`XY` 和 `X > Y` 之间的区别在于后者命令选择其直接子元素。 看下面的例子：

     
            
  •  List Item          
                   
    •  Child 
      •           
            
    •         
  •  List Item 
    •         
  •  List Item 
    •         
  •  List Item 
    •      

`# > ul` 只会选择 `div` 下所有 `id` 为 '' 的直接 `ul` 元素。 它不会在第一个“li”下找到“ul”元素。

由于某些原因，将选择器与子节点组合起来有许多性能优势。 事实上，在 .

演示版

兼容性

9.X~Y

ul ~ p {    color: red;  }

兄弟节点组合选择器与`X+Y`非常相似，但没有那么严格。 `ul + p` 选择器仅选择那些紧跟在指定元素之后的元素。 该选择器将选择目标元素之后的所有匹配元素。

演示版

兼容性

10.X[标题]

a[title] {    color: green;  }

这称为属性选择器。 在上面的例子中，只有具有 title 属性的元素才会被选择。 没有此属性的锚标记将不会被此代码修改。 然后再想一想，如果想过滤得更具体怎么办？ 那…

演示版

兼容性

11. X[href="foo"]

a[href="http://strongme.cn"] {    color: #1f6053; /* nettuts green */  }

上面的代码会将href属性值为绿色的锚标签设置为绿色，而其他标签不受影响。

请注意，我们将该值括在双引号中。 然后使用时使用双引号。 如果可能，请使用标准 CSS3 选择器。

这可行，但仍然有点死。 如果不是这个链接，而是一个类似的链接，那么你就必须使用正则表达式。

演示版

兼容性

12. X[href*=""]

a[href*="strongme"] {    color: #1f6053;  }

Tada 正是我们所需要的。 这样就规定了这个值必须出现在锚标签的`href`属性中。 无论是``还是``还是``，都可以选择。

但请记住，这是一个非常广泛的表达方式。 如果锚标记指向不相关的站点，并且您想要更具体的限制，请使用“^”和“$”分别指示字符串的开头和结尾。

演示版

兼容性

13. X[href^="href"]

a[href^="http"] {     background: url(path/to/external/icon.png) no-repeat;     padding-left: 10px;  }

你一定很好奇。 有些网站的锚标记旁边有一个外部链接图标。 我相信你已经看到了这种情况的发生。 这样的设计会清楚地告诉你，你将被重定向到另一个网站。

使用克拉符号可以轻松完成此操作。 它通常用在正则表达式中来标识开头。 如果我们想在锚属性“href”中定位以“http”开头的标签，那么我们可以使用与上面类似的代码。

请注意，我们没有搜索，这没有必要，因为它不包含任何一个。

那么如果我们想找到所有指向图像的锚标签怎么办？ 然后我们使用“&”字符。

演示版

兼容性

14. X[href$=".jpg"]

a[href$=".jpg"] {    color: red;  }

这次我们再次使用正则表达式`$`来表示字符串的结尾。 这段代码的意思是搜索所有图片链接，或者其他以`.jpg`结尾的链接。 但请记住，这种写法不适用于“gifs”和“pngs”。

演示版

兼容性

15.X[数据-*=“foo”]

a[data-filetype="image"] {     color: red;  }

回到第8项，我们如何选择所有图像类型“png”、“jpeg”、“jpg”、“gif”？ 我们可以使用多个选择器。 向下看：

a[href$=".jpg"],  a[href$=".jpeg"],  a[href$=".png"],  a[href$=".gif"] {     color: red;  }

但这样写很痛苦，而且效率会很低。 另一种方法是使用自定义属性。 我们可以为每个锚点添加一个属性“data-”来指定该链接指向的图像类型。

[html]

图片链接

标签:
打赏 点赞( )

相关文章