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会在.not内找到p。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除选择器中的空格：

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

p .one选择一个类one的元素作为段落标记的后代，而p.one选择具有类one的段落。

Answer 3

我同意有关CSS问题的答案。关于你的另一个问题，一些编辑可以帮助你解决标签和拼写错误。例如，Sublime Text，Notepad ++，Atom等具有良好的语法突出显示功能，可以缩进代码，关闭打开的标签并指出拼写错误。可以通过W3C验证器根据W3C标准验证HTML和CSS。有些编辑器具有验证代码的功能，但您可以随时使用在线验证工具。

希望这有助于您的编码。

Answer 4

完美无缺！在这里演示：http://jsfiddle.net/zb31m0de/

您在 . 和 one 之间有空格让我教你一件事:-)。用阴影和一些填充物使你的盒子美丽。

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

Answer 5

只需使用

border : 2px solid black;

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

Answer 6

不要使用p.one{...}来增加CSS特异性。当您完全需要仅定位目标p元素时，它非常有用。

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

Answer 7

使用此

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

为什么我无法添加边框宽度

7 个答案: