用更少的行减少CSS选择器

d4so4syb 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(156)

有没有可能减少这些CSS类？

body.bank #page_content input,
body.bank #page_content textarea,
body.bank #page_content .inp-checkbox,
.list-tr.bank input,
.list-tr.bank textarea,
.list-tr.bank .inp-checkbox,
body.creditor #page_content input,
body.creditor #page_content textarea,
body.creditor #page_content .inp-checkbox,
.list-tr.creditor input,
.list-tr.creditor textarea,
.list-tr.creditor .inp-checkbox,
body.debtor #page_content input,
body.debtor #page_content textarea,
body.debtor #page_content .inp-checkbox,
.list-tr.debtor input,
.list-tr.debtor textarea,
.list-tr.debtor .inp-checkbox{
    --opacity-border:35%;
}

css

来源：https://stackoverflow.com/questions/74903660/reduce-css-selectors-with-fewer-lines

3条答案

按热度按时间

gcuhipw91#

使用:where或:is伪类。

:where(.list-tr.bank, .list-tr.creditor, .list-tr.debtor) :where(input, textarea, .inp-checkbox),
:where(body.bank, body.creditor, body.debtor) #page_content :where(input, textarea, .inp-checkbox) {
    --opacity-border: 35%;
}

赞(0）回复(0）举报 2022-12-24

sd2nnvve2#

就body.bank而言，为什么不简单地使用.bank类呢？.list-tr也是如此。而且看起来#page_content可以用HTML main元素替换。

赞(0）回复(0）举报 2022-12-24

jq6vz3qz3#

您可以查看具有选择器https://developer.mozilla.org/en-US/docs/Web/CSS/:has

赞(0）回复(0）举报 2022-12-24