jquery属性选择器_属性选择器

jquery属性选择器

Attribute selectors are another area of CSS that have historically been underused and unappreciated, partly due to a historical lack of support in IE. However, the selectors that I am about to show you are supported in every modern browser, including IE7+.

属性选择器是CSS的另一个领域，历史上一直未得到充分利用和重视，部分原因是IE一直缺乏支持。 但是，我要向您展示的选择器在包括IE7 +在内的所有现代浏览器中均受支持。

Attribute selectors are a simple form of regular expression pattern matching for CSS, and one of the tools we can use to reduce additions to our markup, which is always a good thing; as a general rule, the more markup you can eliminate the easier your HTML and CSS becomes to create and maintain, and the more consistent your site appears.

属性选择器是CSS的正则表达式模式匹配的一种简单形式，并且是我们可以用来减少标记添加量的工具之一，这总是一件好事。 通常，可以消除的标记越多，HTML和CSS的创建和维护就越容易，并且网站的外观也就越一致。

简单属性选择器 (Simple Attribute selector)

abbr[title] { color: black; }

Matches:

火柴：

<abbr title="International Business Machines">IBM

Matches every abbr element that has a title attribute.

匹配每个具有title属性的abbr元素。

input[required] { background: white; }

Matches:

火柴：

<input type="number" required>

Matches every element that uses the stated attribute, no matter what the value of the attribute might be. I don’t find this version of the selector terribly useful, as most elements will feature shared uses of an attribute. What comes next gets more interesting:

匹配使用指定属性的每个元素，无论该属性的值是多少。 我发现这个版本的选择器并不是非常有用，因为大多数元素都具有属性的共享用法。 接下来发生的事情变得更加有趣：

属性值选择器 (Attribute value selector)

input[type="submit"] { color: orange; }

Matches:

火柴：

<input type="submit">

(Note the lack of spaces in the selector). Very useful for selecting form elements, among other purposes. However, the exact value of the attribute must be known. That is not the case with the next set of selectors.

(请注意，选择器中没有空格)。 除其他目的外，对于选择表单元素非常有用。 但是，必须知道该属性的确切值。 下一组选择器不是这种情况。

分隔的属性值选择器 (Separated attribute value selector)

img[alt~=Zealand] { border: 3px solid green; }

Matches:

火柴：

<img alt="New Zealand" … >

Whereas the standard attribute selector looks for an exact matching value, the ~= CSS attribute selector will match a value from a space-separated list.

标准属性选择器将查找精确匹配的值，而~= CSS属性选择器将匹配以空格分隔的列表中的值。

CSS3 adds three variations to the attribute selector:

CSS3向属性选择器添加了三种变体：

属性“开始于”值选择器 (Attribute “starts with” value selector)

a[href^="/blog"]

Matches:

火柴：

<a href="/all-about-attribute-selectors">

Matches an attribute value that starts with a set of characters.

匹配以一组字符开头的属性值。

属性“以”结尾的值选择器 (Attribute “ends with” value selector)

p[class$="ed"]

Matches:

火柴：

<p class="educated">

Also matches:

还匹配：

<p class="reed">

属性“包含”值选择器 (Attribute “includes” value selector)

a[class*="on"]

Matches:

火柴：

<a class="bonobo">

区分大小写 (Case sensitivity)

CSS Selectors Level 4 adds a case-insenstive flag:

CSS选择器第4级添加了区分大小写的标志：

input[type="submit" i]

The selector above will match <input type="SUBMIT">, <input type="submit">, and any other combination. Right now only Chrome supports this option, while other browsers don’t yet make the distinction between uppercase and lowercase for attribute values (and are confused by the case-insensitive flag), so I can't recommend using it in production yet.

上面的选择器将匹配<input type="SUBMIT"> ， <input type="submit">以及任何其他组合。 目前，只有Chrome支持此选项，而其他浏览器尚未区分属性值的大写和小写(并且不区分大小写的标志引起混淆)，因此我不建议在生产环境中使用它。

翻译自: https://thenewcode.com/509/The-Attribute-Selector

jquery属性选择器