为什么我不能添加边框宽度

Question

我是 CSS 的新手。我试图在文本周围创建边框，但边框没有出现。还有在线编辑器可以告诉我标签中的错误，甚至是拼写错误？

 <!DOCTYPE html>

 <html>
 <head>
 <title> CSS Practice 
 </title>
 <style>
 p. one {border-width: 2px; border-style: solid;}
 </style>
 </head>

 <body>
 <p class="one"> My name is xyz </p>
 </body>
 </html>

Answer 1

您的选择器应该是 p.one，而不是 p .not。

p .not 将在 p.

中寻找 .not

p.one {
  border-width: 2px;
  border-style: solid;
}

<p class="one">My name is xyz</p>

Answer 2

删除选择器中的 space：

p.one {border-width: 2px; border-style: solid;}

p .one 选择具有 class one 的元素，该元素是段落标记的后代，而 p.one 选择具有 class 的段落one.

Answer 3

我同意关于 CSS 问题的答案。关于你的另一个问题，一些编辑会在标签和拼写错误方面帮助你。例如，Sublime Text、Notepad++、Atom 和其他软件都有很好的语法高亮显示和缩进代码、关闭打开的标签和指出拼写错误的功能。 HTML 和 CSS 可以通过 W3C 验证器根据 W3C 标准进行验证。一些编辑器具有验证代码的功能，但您始终可以使用那里的在线验证工具。

希望这对您的编码有所帮助。

Answer 4

使用这个

p.one{border:2px solid #000}

Answer 5

工作得很好！
此处演示：http://jsfiddle.net/zb31m0de/

您在 . 和 one[=20= 之间有一个 space ] 让我再教你一件事:-)。用阴影和一些填充让你的盒子漂亮。

box-shadow: 2px 2px 10px 3px #CCC;
padding:10px;

Answer 6

只需使用

border : 2px solid black;

增加 2px 可能会增加边框宽度。

Answer 7

不要使用 p.one{...} 因为会增加 CSS 特异性。当您严格需要仅对目标 p 元素设置样式时，它很有用。

在您的示例中，您可以只放置一个语义 class名称并使用必需的属性和值。仅供参考，p.classname 和 .classname 具有不同的含义并区别对待。例如。如果您使用 p.classname 样式将仅应用于具有 .classname 的 class 的 p 元素，但是如果您将选择器定义为 .classname 那么您可以使用任何元素，即使它不是 p 元素。

为什么我不能添加边框宽度

why am I not able to add border width

html

css