部分SelectElement节点名称的CSS选择器

Question

更新：寻求其他解决方案：

<img is=queen-of-hearts>

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

---

此问题是有关解决CSS选择器限制的问题

因此，我的自定义元素现在可以生成真正的对称HTML：

显示：

没有外部SVG文件，
将所有500KB SVG（手动）精简，并将LZMA打包为70KB，放入 ONE 自定义元素
然后使用Supersharps class factory code

创建所有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回答“部分选择器”，使用JS进行蛮力搜索

• 我已经搜索了CSS4 Selectors，没有什么引起我的注意

• 我也可以（有点暴力）用JS创建所有CSS规则

• 是忽略节点名称并添加（数据）属性或类名称的唯一选择吗？

注意：我有一个<Queen-of-Hearts rank="Queen" suit="Hearts" />的版本，
但这不像语义上的“令人愉快”

对任何指针感兴趣，希望找到一种优雅的解决方案来捕获CSS中的纸牌或扑克规则，
没有浏览器限制，
这是一个“探索浏览器功能的乐趣” 项目...
清理后将在GitHub

更新

使用我们忽略的表示法：扩展内置元素：

<img is=queen-of-hearts>

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

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

<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