CSS 部分 CustomElement 节点名的选择器

Question

更新：寻求不同的解决方案：

<img is=queen-of-hearts>

住在：https://card-ts.github.io/playingcardts

这个问题是关于解决 CSS 选择器限制

所以我的自定义元素现在实现了真正的语义 HTML:

正在显示：

没有外部 SVG 文件，
所有 500KB SVG（手动）精简，LZMA 打包到 70KB 到 ONE 自定义元素
然后使用

创建所有 52 张卡片（自定义元素）

下一个问题出现了...要使用什么选择器？

我可以做到：

    Queen-of-Hearts {
      transform: rotate(20deg)
    }

但是要突出显示跟随女王的每位国王（只有一位以上），CSS 变得冗长：

        Queen-of-Spades+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs,

        Queen-of-Hearts+King-of-Spades,
        Queen-of-Hearts+King-of-Hearts,
        Queen-of-Hearts+King-of-Diamonds,
        Queen-of-Hearts+King-of-Clubs,

        Queen-of-Diamonds+King-of-Spades,
        Queen-of-Diamonds+King-of-Hearts,
        Queen-of-Diamonds+King-of-Diamonds,
        Queen-of-Diamonds+King-of-Clubs,

        Queen-of-Clubs+King-of-Spades,
        Queen-of-Clubs+King-of-Hearts,
        Queen-of-Clubs+King-of-Diamonds,
        Queen-of-Clubs+King-of-Clubs {
            transform: scale(1.2);
            border: 1px solid green;
        }

我想CSS写成：

    Queen* + King* {
            transform: scale(1.2);
            border: 1px solid green;
    }

大量 jQuery 'partial selectors' 的答案，只需使用 JS
我搜索过CSS4 Selectors，没有引起我注意的东西
我可以（也有点蛮力）用 JS
是忽略节点名并添加（数据）属性或类名的唯一选择吗？

注意：我有一个版本<Queen-of-Hearts rank="Queen" suit="Hearts" />
但它在语义上并不像 'pleasant'

对在 CSS、
中捕获纸牌或扑克规则的优雅解决方案的任何指示感兴趣没有浏览器限制，
这是一个 'having fun exploring browser capabilities' 项目...
清洁后将在 GitHub

更新

使用我们忽略的符号：扩展内置元素：

<img is=queen-of-hearts>

自动关闭
是单个 DOM 元素
可以使用 CSS 选择器访问 img[is*=queen]
唯一的限制是=必须是小写...

可能比我开始使用的自治自定义元素的符号更好：

<card-t cid=Queen-of-Hearts></card-t>

两个（我必须说是 53 个元素）都包含在单个 16 KB 文件中：

https://card-ts.github.io/playingcardts

Answer 1

如果您最终决定按照 Connexo 的建议使用唯一的自定义元素名称，保留 named 属性来定义等级和花色可能会很有用。

<playing-card rank="Queen" suit="Hearts">

然后您可以定义将双向反映属性值的属性。

card.rank === card.getAttribute( 'rank' )

与使用属性作为值.

相比，这样可以更容易地找到卡片的值

考虑这个符号：

<playing-card queen hearts></playing-card>

问题：它的值是多少？

let card = game.querySelector( 'playing-card' )    
if ( card.getAttribute( 'spades ') )
     suit = spades
else if ( card.getAttributes( 'diamonds' ) )
     ...

或者，您可以使用单个 name 属性：

html

<playing-card name="10-of-spades">

javascript

//easy manipulation
let card = document.querySelector( 'playing-card' ) 
let [rank, suit] = card.name.split( '-of-' )

css

//easy selection (...for advanced CSS users)
[name|=king] + [name|=queen]  //Queens after a King
[name|=1]                     //Aces
[name$=spades]                //Spades

CSS 部分 CustomElement 节点名的选择器

CSS Selector for a partial CustomElement nodename

css-selectors

web-component

custom-element

下一个问题出现了...要使用什么选择器？

我想CSS写成：

更新

https://card-ts.github.io/playingcardts