.container.\31 25 \25是什么意思在CSS？

问题描述

在下面的代码中，我想知道 \ 反斜杠是什么意思？我在我一直在学习的课程中没有遇到反斜杠字符。这段代码用于标识浏览器大小。我相信。

  .container.\ 31 25 \25 {
 width：100％; 
 max-width：1500px; / * max-width：（containers * 1.25）* / 
 min-width：1200px; / * min-width：（containers）* / 
} 
 .container.\37 5 \25 {/ * 75％* / 
 width：900px; / * width：（containers * 0.75）* / 
} 
 .container.\35 0 \25 {/ * 50％* / 
 width：600px; / * width：（containers * 0.50）* / 
} 
 .container.\32 5 \25 {/ * 25％* / 
 width：300px; / * width：（containers * 0.25）* / 
} 
  

解决方案

根据，

因此，以下是等效的：

  .container.\31 25 \25<  - > .container [class〜=125％] 
 .container.\37 5\25<  - > .container [class〜=75％] 
 .container.\35 0 \25<  - > .container [class〜=50％] 
 .container.\32 5\25<  - > .container [class〜=25％] 
  

请注意，转义很重要，在CSS中，标识符（包括元素名称，类和类）和
中的ID只能包含字符[a-zA-Z0-9]和ISO 10646
字符U + 00A0及更高，加连字符（ - ）和下划线
（_）;他们不能以数字开头，两个连字符或连字符后跟
。

因此，以下内容无效：

  .container.125％
。 container.75％
 .container.50％
 .container.25％
  

也许使用这个小提琴可能更清楚：

  .container {background：red; margin：10px;}。container.\31 25 \25 {/ * 125％* / width：100％; max-width：1500px; / *（containers * 1.25）* / min-width：1200px; / *（containers * 1.00）* /}。container.\37 5 \25 {/ * 75％* / width：900px; / *（containers * 0.75）* /}。container.\35 0 \25 {/ * 50％* / width：600px; / *（containers * 0.50）* /}。container.\32 5 \25 {/ * 25％* / width：300px; / *（containers * 0.25）* /}  

  div class =container 125％> 125％< / div>< div class =container 75％> 75％< / div> < / div>< div class =container 25％> 25％< / div>  

In the code below, I am wondering what the \ backslash might mean? I have not encounter the backslash character in the lessons I've been taking. This piece of code is used to identify browser sizes, I believe.

.container.\31 25\25 {
  width: 100%;
  max-width: 1500px;  /* max-width: (containers * 1.25) */
  min-width: 1200px;  /* min-width: (containers) */
}
.container.\37 5\25 { /* 75% */
  width: 900px;       /* width: (containers * 0.75) */
}
.container.\35 0\25 { /* 50% */
  width: 600px;       /* width: (containers * 0.50) */
}
.container.\32 5\25 { /* 25% */
  width: 300px;       /* width: (containers * 0.25) */
}

解决方案

According to the spec,

Therefore, the following are equivalent:

.container.\31 25\25   <-->   .container[class ~= "125%"]
.container.\37 5\25    <-->   .container[class ~= "75%"]
.container.\35 0\25    <-->   .container[class ~= "50%"]
.container.\32 5\25    <-->   .container[class ~= "25%"]

Note that escaping is important, otherwise they wouldn't be valid identifiers (emphasis mine):

Therefore, the following are invalid:

.container.125%
.container.75%
.container.50%
.container.25%

Maybe it may be clearer with this fiddle:

.container {
  background: red;
  margin: 10px;
}
.container.\31 25\25 { /* 125% */
  width: 100%;
  max-width: 1500px;  /* (containers * 1.25) */
  min-width: 1200px;  /* (containers * 1.00) */
}
.container.\37 5\25 { /* 75% */
  width: 900px;       /* (containers * 0.75) */
}
.container.\35 0\25 { /* 50% */
  width: 600px;       /* (containers * 0.50) */
}
.container.\32 5\25 { /* 25% */
  width: 300px;       /* (containers * 0.25) */
}

<div class="container 125%">125%</div>
<div class="container 75%">75%</div>
<div class="container 50%">50%</div>
<div class="container 25%">25%</div>

这篇关于.container.\31 25 \25是什么意思在CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！