markdown CSS选择器 - 匹配部分类名(和其他属性)!!!

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown CSS选择器 - 匹配部分类名(和其他属性)!!!相关的知识,希望对你有一定的参考价值。

Ok, this is already in a reference file I've got in evernote, but I didn't realize until I went specifically looking for it!

The important thing to note here is that **'class' is an attribute!!!**

### Substring value attribute selectors
Attribute selectors in this class are also known as "RegExp-like selectors", because they offer flexible matching in a similar fashion to regular expression (but to be clear, these selectors are not true regular expression):

*   [attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val.
*   [attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val.
*   [attr*=val] : This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. "cat" is a substring in the string "caterpillar".) 

---

| Selector | Example | Example Description |
|---|---|---|
|`[attribute]`|`[target]`|Selects all elements with a target attribute |
|`[attribute=value]`|`[target=_blank]`|Selects all elements with target="_blank"|
|`[attribute~=value]`|`[title~=flower]`|Selects all elements with a title attribute containing the word "flower" (Space separated -- will match title="flower power" and title="steel flower" but not title="flower-power" or title="flowers are great")|
|[`[attribute`|`=value]`](https://stackoverflow.com/a/34530984/6412747)|`[lang`|`=en]`|Selects all elements with a lang attribute value starting with "en" (Hyphen separated -- will match lang="en-3" but not lang="english" or lang="en or bust")|
|`[attribute^=value]`|`a[href^="https"]`|Selects every `<a>` element whose href attribute value begins with "https"|
|`[attribute$=value]`|`a[href$=".pdf"]`|Selects every `<a>` element whose href attribute value ends with ".pdf"|
|`[attribute*=value]`|`a[href*="w3schools"]`|Selects every `<a>` element whose href attribute value contains the substring "w3schools"|


### Reference:
[CSS Tricks: The Skinny on CSS Attribute Selectors](https://css-tricks.com/attribute-selectors/)

以上是关于markdown CSS选择器 - 匹配部分类名(和其他属性)!!!的主要内容,如果未能解决你的问题,请参考以下文章

010. CSS 选择器

CSS 选择器选择 div 类名的一部分

jQuery选择器

CSS 选择器

CSS选择器与优先级详解(一)

jQuery选择器