css通配符选择器
Introduction:
介绍：
We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that question was no, then don't worry it is understandable but as a developer, we must try our best to get to know about various selectors. Knowing about various properties of CSS will only make our work easy and fast, there might come a time in the future where you may get stuck somewhere in your website or web page and you have no idea what to do, later when you will look for solutions for your issue you will realize that the issue was not at all tough only had you known some fundamental properties of CSS. Therefore, here in this article, we are going to discuss a very crucial property called selectors.
我们都知道可用于开发网站或网页的各种选择器。 但是我们都知道吗？ 好吧，如果您对这个问题的回答是“否”，那么不要担心它是可以理解的，但是作为开发人员，我们必须尽力了解各种选择器。 了解CSS的各种属性只会使我们的工作变得轻松快捷，将来可能会有一段时间，您可能会卡在网站或网页中的某个地方，并且不知道要做什么，以后再寻找针对您的问题的解决方案，您将意识到，仅了解CSS的一些基本属性，该问题就不会很难解决。 因此，在本文的此处，我们将讨论一个非常重要的属性，称为选择器。
Trivia:
琐事：
Selectors, as the name suggests are used for selecting elements on your website or web page and there's nothing much to do with the selectors. With the help of selectors, you can select the elements and then perform some actions on those selected elements. But as simple as it sounds, it is equally critical to know about selectors as if you happen to make use of any wrong selector then your code might get ruined and all your efforts and hard work will go in vain. Therefore, it is a must that you learn about a property thoroughly and then implement it. If you start implementing a property without proper knowledge then you might have to face some drastic effects.
顾名思义，选择器用于选择您的网站或网页上的元素，与选择器没有多大关系。 借助选择器，您可以选择元素，然后对那些选定的元素执行一些操作。 但是，听起来很简单，了解选择器同样至关重要，就好像您碰巧使用了任何错误的选择器一样，您的代码可能会毁了，所有的努力和辛苦的工作将徒劳无功。 因此，必须彻底了解某个属性然后实施它。 如果您在没有适当知识的情况下开始实现某个属性，那么您可能不得不面对一些巨大的影响。
Definition and usage:
定义和用法：
Now that we are aware of selectors and their importance, why don't we talk about a very specific selector called the wildcard selectors (*,^ and $)? Well, for those who heard this term for the first time, don't worry, this article has got you covered and you will learn about these selectors very easily and you will be able to make use of these selectors in no time.
现在我们已经了解了选择器及其重要性，为什么不讨论一个非常特定的选择器，称为通配符选择器(*，^和$)呢？ 好吧，对于那些第一次听说这个术语的人来说，请放心，这篇文章已经为您覆盖了，您将非常容易地了解这些选择器，并且可以立即使用这些选择器。
So, let us move forward with the formal definition of the Wildcard Selectors:
The Wildcard Selector is used to select or choose various elements at the same time simultaneously. This selector would help in selecting similar types of class designation, name or attribute and make them CSS property usable. * wildcard can also be referred to as containing a wildcard.
因此，让我们继续使用通配符选择器的正式定义：
通配符选择器用于同时选择或选择各种元素。 该选择器将帮助选择相似类型的类名称，名称或属性，并使它们CSS属性可用。 *通配符也可以称为包含通配符。
Let us have a look at each one of these selectors one by one.
让我们一一看一下这些选择器中的每一个。
1)[attribute * =“ str”]选择器 (1) [attribute*="str"] Selector)
The first and foremost in the list is [attribute*="str"] selector. The behavior of this selector is very easy to understand and you can easily put this selector to use. The purpose of this selector is to select only those elements who comprise of specified substring str.
列表中的第一个也是最重要的是[attribute * =“ str”]选择器。 该选择器的行为非常容易理解，您可以轻松使用该选择器。 该选择器的目的是仅选择那些由指定子字符串str组成的元素。
Now for implementation, let us have a look at the syntax,
现在要实现，让我们看一下语法，
[attribute*="value"]{
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
[class*="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
输出量
In the above example, the element with class name having clr are selected and styled accordingly.
在上面的示例中，类名称为clr的元素将被选择并相应设置样式。
2)[attribute ^ =“ str”]选择器 (2) [attribute^="str"] Selector)
The second selector that you need to learn about is the [attribute^="str"] selector. This selector is something similar to the [attribute*=" str"]selector as this selector selects those elements whose attributes begin with very specified value str.
您需要了解的第二个选择器是[attribute ^ =“ str”]选择器。 该选择器类似于[attribute * =“ str”]选择器，因为该选择器选择其属性以非常指定的值str开头的那些元素。
Let us understand this better with the help of a syntax representation.
让我们借助语法表示法更好地理解这一点。
[attribute^="str"]{
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
[class^="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
输出量
In the above example, the elements are selected whose class name starts with clr.
在上面的示例中，选择了其类名以clr开头的元素。
3)[attribute $ =“ str”]选择器 (3) [attribute$="str"] Selector)
Similar to the first two selectors the purpose of [attribute$="str"] Selector is to select those elements whose attributes end with very specified value str.
类似于前两个选择器， [attribute $ =“ str”]选择器的目的是选择属性以非常指定的值str结尾的那些元素。
Why not have a look at the syntax?
为什么不看一下语法呢？
[attribute$=" str"]{
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
[class$="clr"] {
width: 60%;
background: red;
color: white;
}
li {
width: 100%;
background: black;
color: white;
}
ul.list {
list-style-type: circle;
font-size: 30px;
}
</style>
</head>
<body>
<ul class="list">
<li class="clr-red">red</li>
<li class="gr">green</li>
<li class="clr-blue">blue</li>
<li class="clr-pink">pink</li>
<li class="yellow-clr">yellow</li>
</ul>
</body>
</html>
Output
输出量
In the above example, the elements are selected whose class name ends with clr.
在上面的示例中，选择了其类名以clr结尾的元素。
翻译自: https://www.includehelp.com/code-snippets/wildcard-selectors-in-css.aspx
css通配符选择器
扫一扫
6905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
