css的属性选择
/* <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后面加上 & ,这个子就变成父了。
父类包含子类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/
阅读量: 860
发布于:
修改于:
发布于:
修改于: