部分 CustomElement 节点名的 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] 访问
• 唯一的限制是=必须是小写...

可能比我开始使用的自治自定义元素的表示法更好：

<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