Question

我试图操纵 <p>标记中的内容。我想要定位段落中的每个元素。我有以下内容：

   <p class="num">123456789</p>

这是通过表单生成的数字，我想通过css为每个数字添加填充，这样可能吗？我自己尝试过一些东西，但没有用。

我的CSS：

   *p.num {padding-right:5px;}
   p.num * {padding-right:5px;}

另一件事是我也试图操纵我的代码的输入值：

   <input type="text" value="Name" placeholder="Name" />

我已经使用了值和占位符，因为较旧的IE不支持占位符，这就是为什么我想要定位值以便我可以在新浏览器中禁用它。我在这个问题上尝试了一些事情：

   input[value="Name"] {font-size:0;}
   input[value="Name"] {display:none;}

第一个也将占位符清零，第二个完全隐藏输入。所以，我想知道是否有任何可能的CSS来实现这个目标？

Answer 1

对于第一个问题，解决方案非常简单：

使用此CSS规则

p.num {
  letter-spacing: 1em;
}

Answer 2

你的意思是字母间距属性？您需要为输入框创建一个ID或类，如下所示：

<input id="name" type="text" value="Name" placeholder="Name" />

它的css会是这样的：

#name{ letter-spacing: 3px; }

Answer 3

您的标签上写着操纵输入和PARA。所以我给你举例说明如何操纵它。

Fiddle Demo

<强>解释

  <form class="formclass">
    <p class="num">213213</p>
    <p class="num">213</p>
    <p class="notNum">sadas</p>

    <input type="text" value="vals"></input>
 </form>

<强> CSS

.formclass p.num 
 {
   color: red;
 }

.formclass input[value="vals"]
{
   color: brown;
}

Answer 4

对于你的第一个问题，你可以试试jquery

$('.num').css('padding-right','5px');

或者基本比jquery更多，你可以编写纯css

.num{ padding-right:5px; }

Answer 5

对于字母之间的间距，请使用：

p.num{letter-spacing:2px;}

要根据浏览器类型显示内容，您必须使用条件评论：

<!--[if IE]>
Place content here to target all Internet Explorer users.
<![endif]-->

<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>

<!--[if gte IE 8]>
Place content here to target users of Internet Explorer 8 or higher.
<![endif]-->

<!--[if lt IE 7]>
Place content here to target users of Internet Explorer 6 or lower (less than 7).
<![endif]-->

这应该可以帮到你。Read more

您可能还想检查Stackoverflow本身的this answer。

操纵段落内的输入值和内容

5 个答案: