我可以在 CSS class 名字中使用汉字吗？

Question

我的 CSS class 可以使用中文 class 名字吗？我正在尝试使用 jQuery 获取中文单词，然后使用以中文单词命名的 classes 创建 img 元素。

例如，我有一个名为 2020_Cars_哈喽_1.jpg 的文件，我创建了一个包含年份、类别（汽车）和作为专辑名称的中文单词的代码，并创建了一个 img 元素根据文件名加上 classes 以便稍后过滤图像。

我有一个示例 here，您可以在其中看到翻译成 classes 的类别没有任何问题，而 %46%bd% 是我无法成功转换的中文单词变成 class 名字。

有什么建议吗？

jQuery 代码获取文件名并将其拆分为 classes:

 $.ajax({
     url: dir,
     success: function(data){
         $(data).find("a:contains(.JPG)").each(function(){
             // will loop through
             var images = $(this).attr("href");
             var splittedName = images.split('_');
             var classesToAdd = 'thumbnailpic';
             for(var i=0;i<3;i++){
                 classesToAdd+=' '+splittedName[i];
             }

             if(years.indexOf(splittedName[0])===-1){
                 years.push(splittedName[0]);
             }
             if(categories.indexOf(splittedName[1])===-1) {
                 categories.push(splittedName[1]);
             }
             if(albums.indexOf(splittedName[2])===-1) {
                 albums.push(splittedName[2]);
             }

             $('.gallery').append('<img class="'+classesToAdd+'" src="'+dir+'/'+images+'"'+'>');

         });

         for(var a=0;a<years.length;a++){
             $('.years').append('<div id="filter-button" class="filter-select" >'+years[a]+'</div>');
         }

         for(var b=0;b<categories.length;b++){
             $('.categories').append('<div id="filter-button" class="filter-select">'+categories[b]+'</div>');
         }

         for(var c=0;c<albums.length;c++){
             $('.albums').append('<div id="filter-button" class="filter-select">'+albums[c]+'</div>');
         }
         hideBigPic();
         $('.filters').fadeIn(1000);
         $('.gallery').fadeIn(1000);
     }
 });

提前致谢！

Answer 1

是的，您可以使用中文字符作为 class 名称和选择器。

div {
  width: 100px;
  height: 100px;
}

.tomato {
  background: tomato;
}

.蓝色 {
  background: navy;
}

<div class="蓝色"></div>
<div class="tomato"></div>
<br>
<button onclick="console.log(document.querySelector('.蓝色'))">Find Element</button>

但看起来真正的问题是如何将 URL 编码字符（%46 等）转回真实字符，为此您需要 decodeURIComponent

console.log(decodeURIComponent('%E8%93%9D'))

希望这能回答您的所有问题。

我可以在 CSS class 名字中使用汉字吗？

Can I use Chinese characters in CSS class names?

css

chinese-locale