css的属性选择

css中我们常见的就是 通过匹配 class 和id 来匹配元素。

还有 attribute selectors，通过判断元素具有某个属性来匹配。
看例子

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
  color: green;
}

/* <a> elements with an href containing "example"， *表示包含*/
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org", case-insensitive $结尾，不分大小写 */
a[href$=".org" i] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo"， ~ 属性名包含 */
a[class~="logo"] {
  padding: 2px;
}
/* 同上*/
[class~=class_name] { style properties }

[id=id_value] { style properties }

还有嵌套匹配，嵌套匹配，最主要是认清楚 & 的意思，& 就代表 当前的scope范围。
父类包含子类css，但是 子类css后面加上 & ，这个子就变成父了。

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}


https://blog.arkency.com/how-to-add-a-loading-animation-to-your-turbo-frame-with-tailwindcss/
阅读量: 1177
发布于:
修改于: