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

Question

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

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

这是通过表单生成的数字，我想通过 css 为每个数字添加填充，可以吗？我自己尝试了一些方法，但没有帮助。

我的 CSS：

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

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

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

我同时使用了 value 和 placeholder，因为旧版 IE 不支持 placeholder，这就是为什么我想定位 value 以便我可以在新浏览器中禁用它。我在这个上尝试了一些东西：

   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

您的标签上写着 MANIPULATING INPUT AND 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;}

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

<!--[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。