部分CustomElement节点名的CSS选择器

Question

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

<img is=queen-of-hearts>

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

---

这个问题是关于解决CSS Selector限制

所以我的自定义元素现在可以生成真正的语义HTML：

显示：

没有外部SVG文件， 所有500KB SVG（手动）细长，LZMA打包到70KB到一个自定义元素 然后使用Supersharps class factory code创建所有52张卡片（自定义元素）

Next problem arises... What selectors to use?

I can do:

    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中捕获Solitaire或Poker规则的优雅解决方案的任何指针感兴趣， 没有浏览器限制， 这是一个“探索浏览器功能的乐趣”项目...... 一旦清理过，将在GitHub上

Update

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

<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建议的唯一自定义元素名称，那么保持命名属性以确定排名和适合度可能会很有用。

<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