用更少的行来减少CSS选择器

Question

是否有可能减少这些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%;
}

Answer 1

使用: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%;
}

Answer 2

就body.bank而言，为什么不简单地使用.bank类呢?.list-tr也是一样。似乎#page_content可以用HTML的main元素代替。

Answer 3

你可以看看他的选择器https://developer.mozilla.org/en-US/docs/Web/CSS/:has