处理CSS ID和类与空格

t9aqgxwy  于 2023-11-19  发布在  其他
关注(0)|答案(7)|浏览(136)

我有一段话,

<p id="para one" class="paragraph one">Content</p>

字符串
在CSS中如何用空格表示ID和类
当我使用

#para#one{
}

.paragraph.one{
}


它不适用于上面的CSS。

ctrmrzij

ctrmrzij1#

我自己刚刚发现了这个(对现有页面进行样式化,无法更改ID)。
这是我用id来设置的样式:

p[id='para one']{
}

字符串
而且,如前所述,.paragraph.one选择两个类-这意味着它还将选择具有class=" one paragraph"class="not a paragraph this one"的元素。

svujldwt

svujldwt2#

你的CSS类是正确的。你没有一个带空格的类,你有两个类,“paragraph”和“one”。你的CSS正确地选择了同时具有这两个类的元素:

.paragraph.one { color: red; }

字符串
这是一个有用的技术,可以将元素的facet分割成单独的类,这些类可以单独组合。还要注意,<p class="one paragraph">将匹配同一个选择器。

xdyibdwo

xdyibdwo3#

class="paragraph one"

字符串
实际上代表了两个不同的阶级

id="para one"


不会工作,但你可能最终会有一个实际的id的帕拉

sauutmhj

sauutmhj4#

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中唯一,并且必须包含至少一个字符。该值不得包含任何空格字符

c0vxltue

c0vxltue5#

现代浏览器实际上支持id和空格。所以在Chrome 54上可以这样做:

p#para\ one {
}

字符串
而且现代浏览器不支持[id="..."]语法,所以

p[id='para one'] {
}


在Chrome中不起作用54.

xkrw2x1b

xkrw2x1b6#

你不能有空格。如果你使用空格,这意味着你使用了两个不同的类。一个是para,另一个是one

dphi5xsq

dphi5xsq7#

实际上,有一个很好的技巧来理解一些选择器应该是什么样子。
1.打开Chrome浏览器的DevTools(Ctrl + Shift + I)
1.转到“元素”选项卡
1.找到html p元素并选择它
1.现在,在这个“元素”选项卡上,你可以找到另一个选项卡子集(“样式”,“计算”,“布局”等)。
1.在标签标题下方的工具栏中有一个过滤器输入和按钮“:hov”,“.cls”和“+"。使用这个“+"按钮,你应该看到一个新的css规则已经为你创建了正确的选择器。
在我的例子中,我需要选择器为间隔id,因为间隔类选择器是很好的解释(例如在MDN上)。所以它创建了这个css-selector:

p#para\ one {
  //...
}

字符串
这个解决方案已经在其中一个答案的评论中提到了,但没有DevTools技巧

相关问题