我有一段话,
<p id="para one" class="paragraph one">Content</p>
字符串在CSS中如何用空格表示ID和类当我使用
#para#one{ } .paragraph.one{ }
型它不适用于上面的CSS。
ctrmrzij1#
我自己刚刚发现了这个(对现有页面进行样式化,无法更改ID)。这是我用id来设置的样式:
p[id='para one']{ }
字符串而且,如前所述,.paragraph.one选择两个类-这意味着它还将选择具有class=" one paragraph"和class="not a paragraph this one"的元素。
.paragraph.one
class=" one paragraph"
class="not a paragraph this one"
svujldwt2#
你的CSS类是正确的。你没有一个带空格的类,你有两个类,“paragraph”和“one”。你的CSS正确地选择了同时具有这两个类的元素:
.paragraph.one { color: red; }
字符串这是一个有用的技术,可以将元素的facet分割成单独的类,这些类可以单独组合。还要注意,<p class="one paragraph">将匹配同一个选择器。
<p class="one paragraph">
xdyibdwo3#
class="paragraph one"
字符串实际上代表了两个不同的阶级
id="para one"
型不会工作,但你可能最终会有一个实际的id的帕拉
sauutmhj4#
id值或类名中不能有空格。当class属性的值中有空格时,它指定了应用于该元素的多个类:
id
class
<p class="paragraph one"> <!--Has both "paragraph" and "one" class-->
字符串对于id值,规则(HTML 4)规定如下:ID和NAME内标识必须开始以字母([A-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:“)和句点(“.”)。正如你所看到的,空格是无效的。HTML5规范更宽松,但仍然不允许空格(强调添加):id属性指定其元素的唯一标识符(ID)。该值必须在元素的home子树中的所有ID中唯一,并且必须包含至少一个字符。该值不得包含任何空格字符。
c0vxltue5#
现代浏览器实际上支持id和空格。所以在Chrome 54上可以这样做:
p#para\ one { }
字符串而且现代浏览器不支持[id="..."]语法,所以
[id="..."]
p[id='para one'] { }
型在Chrome中不起作用54.
xkrw2x1b6#
你不能有空格。如果你使用空格,这意味着你使用了两个不同的类。一个是para,另一个是one。
para
one
dphi5xsq7#
实际上,有一个很好的技巧来理解一些选择器应该是什么样子。1.打开Chrome浏览器的DevTools(Ctrl + Shift + I)1.转到“元素”选项卡1.找到html p元素并选择它1.现在,在这个“元素”选项卡上,你可以找到另一个选项卡子集(“样式”,“计算”,“布局”等)。1.在标签标题下方的工具栏中有一个过滤器输入和按钮“:hov”,“.cls”和“+"。使用这个“+"按钮,你应该看到一个新的css规则已经为你创建了正确的选择器。在我的例子中,我需要选择器为间隔id,因为间隔类选择器是很好的解释(例如在MDN上)。所以它创建了这个css-selector:
p
p#para\ one { //... }
字符串这个解决方案已经在其中一个答案的评论中提到了,但没有DevTools技巧
7条答案
按热度按时间ctrmrzij1#
我自己刚刚发现了这个(对现有页面进行样式化,无法更改ID)。
这是我用id来设置的样式:
字符串
而且,如前所述,
.paragraph.one
选择两个类-这意味着它还将选择具有class=" one paragraph"
和class="not a paragraph this one"
的元素。svujldwt2#
你的CSS类是正确的。你没有一个带空格的类,你有两个类,“paragraph”和“one”。你的CSS正确地选择了同时具有这两个类的元素:
字符串
这是一个有用的技术,可以将元素的facet分割成单独的类,这些类可以单独组合。还要注意,
<p class="one paragraph">
将匹配同一个选择器。xdyibdwo3#
字符串
实际上代表了两个不同的阶级
型
不会工作,但你可能最终会有一个实际的id的帕拉
sauutmhj4#
id
值或类名中不能有空格。当class
属性的值中有空格时,它指定了应用于该元素的多个类:字符串
对于
id
值,规则(HTML 4)规定如下:ID和NAME内标识必须开始以字母([A-Za-z])开头,后面可以是任意数量的字母、数字([0-9])、连字符(“-”)、下划线(“_”)、冒号(“:“)和句点(“.”)。
正如你所看到的,空格是无效的。HTML5规范更宽松,但仍然不允许空格(强调添加):
id属性指定其元素的唯一标识符(ID)。该值必须在元素的home子树中的所有ID中唯一,并且必须包含至少一个字符。该值不得包含任何空格字符。
c0vxltue5#
现代浏览器实际上支持
id
和空格。所以在Chrome 54上可以这样做:字符串
而且现代浏览器不支持
[id="..."]
语法,所以型
在Chrome中不起作用54.
xkrw2x1b6#
你不能有空格。如果你使用空格,这意味着你使用了两个不同的类。一个是
para
,另一个是one
。dphi5xsq7#
实际上,有一个很好的技巧来理解一些选择器应该是什么样子。
1.打开Chrome浏览器的DevTools(Ctrl + Shift + I)
1.转到“元素”选项卡
1.找到html
p
元素并选择它1.现在,在这个“元素”选项卡上,你可以找到另一个选项卡子集(“样式”,“计算”,“布局”等)。
1.在标签标题下方的工具栏中有一个过滤器输入和按钮“:hov”,“.cls”和“+"。使用这个“+"按钮,你应该看到一个新的css规则已经为你创建了正确的选择器。
在我的例子中,我需要选择器为间隔id,因为间隔类选择器是很好的解释(例如在MDN上)。所以它创建了这个css-selector:
字符串
这个解决方案已经在其中一个答案的评论中提到了,但没有DevTools技巧