Question

我正在获取一些外部html页面，其中所有数据都是小写的。使用css，我试图将完整标签标签的第一个内容大写，但是我无法做到这一点，它完全是这样的大写：

.fontmodal {
     text-transform:capitalize !important;
}

但这没效果......

<table><fieldset><div><label>DATA</label></div></fieldset></table> - 这是当前的结构

现在我在jquery中尝试相同，我不知道该怎么做以及如何继续。

这是我正在尝试的代码：

$('#Container2').find("table>label").css(textTransform,'capitalize');

Answer 1

见下文：

＆＃13;

label {
  text-transform: lowercase;
}

div::first-letter {
  text-transform: uppercase;
}

＆＃13;

<table>
  <fieldset>
    <div>
      <label>DATA</label>
    </div>
  </fieldset>
</table>

＆＃13;

Answer 2

如果您无法更改HTML并需要在第一个字母上应用大写字母，则需要更改<label>标记的默认显示属性：

：第一封信：

仅对显示值为block的元素产生影响，内联块，表格单元格，列表项目或表格标题。在所有其他 case，:: first-letter没有效果。（source MDN）

＆＃13;

label {
  display: inline-block;
  text-transform: lowercase;
}
label::first-letter {
  text-transform: capitalize;
}

＆＃13;

<table>
  <fieldset>
    <div>
      <label>DATA</label>
    </div>
  </fieldset>
</table>

＆＃13;

Answer 3

您可以简化它并执行以下操作。

＆＃13;

$(document ).ready(function() {
$("label").addClass("capitalizer"); // Adjust specificity as needed
});

＆＃13;

.capitalizer {
    font-weight: bold;
    font-size: 72px;
    display: inline-block;
    color: red;
    } 

.capitalizer::first-letter {
    text-transform: capitalize;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <label>data</label>
    </div>

＆＃13;

＆＃13; 注意：我更喜欢 .addClass ，因为 .CSS 会在您的HTML中添加内联css，这是不可取的。

Answer 4

您可以使用CSSS选择器:first-letter来实现此目的。

我发现的微妙之处在于<label/>标记似乎不支持它（无论如何都不能在我的演示代码中工作）

但我们可以解决这个问题：

label {
    text-transform: lowercase;
}
div:first-child:first-letter {
    text-transform: uppercase;
    color: red;
}

DEMO：http://jsfiddle.net/30trmm3w/1

Answer 5

我不明白一个简单的CSS规则应该做什么错误：

#Container2 label {
  text-transform: capitalize;
}

大写标签元素的第一个字母

5 个答案: