CSS 无法识别 ID 或名称

CSS not recognizing id or name

本文关键字：ID 识别 CSS      更新时间：2023-09-26

我正在开发一个烧瓶应用程序，我正在尝试更改文本区域中的内容（请参阅下面的文本区域标签）。我正在使用一个名为ckeditor的开源Web文本编辑器。我的问题是，当我尝试使用 id 名称"name1"来样式化 p 标签中找到的内容时，它实际上不会设置它的样式。但是，当我使用仅使用 p 标签本身时，它可以正常工作。 我是开发 Web 应用程序的新手，任何帮助将不胜感激！谢谢

下面是一段代码：

.HTML：

<body>
    <form>
        <textarea name="editor1" id="editor1" rows="20" cols="70">
            <p id = "name1">  [Your Name]<p>
        </textarea>
        <script>
            CKEDITOR.replace('editor1');
            CKEDITOR.config.contentsCss = '../static/startpage.css';
        </script>
    </form>
</body>

.CSS：

 #name1{ 
    font-family: 'Raleway', sans-serif;
    font-weight:  lighter;
    font-size: 18px;  
    padding-left: 20px;
}

这是有效的CSS代码片段，但不是我想要的：

 p{ 
    font-family: 'Raleway', sans-serif;
    font-weight:  lighter;
    font-size: 18px;  
    padding-left: 20px;
 }

您的 p 标签将在普通文本区域中呈现为文本。
您正在将其替换为CKEDITOR .
CKEDITOR将自动从 html 标记中删除 id 和类

<textarea> 中的内容不会被浏览器解析为 HTML。所以，从字面上看，它根本不是HTML，它只是表示HTML片段的纯文本。

您应该使用其他标签作为其容器，例如 <div>什么的。

<div><p id="name1">[Your Name]<p></div>

编辑：我注意到你正在使用CKEditor。从您的代码中，我猜您正在尝试在编辑器中放置一些默认的富文本。因此，我认为根本原因是（1）您没有遵循文档，或者（2）启动编辑器时出错。

正如 akash 指出的那样，我们不能在文本区域内插入其他 html 标签，因为它是一个输入标签。要显示一些带有输入标签的文本，您可以使用占位符，其他选项是字段内（如果您想使用此标签，可以谷歌搜索此标签）

下面是使用占位符的代码

 <form>
        <textarea placeholder="[Your Name]" cols="30" rows="5"></textarea>
 </form>

您可以像下面这样设置占位符的样式 

::-moz-placeholder {  /* Firefox 19+ */
    font-family: 'Raleway', sans-serif;
    font-weight:  lighter;
    font-size: 18px;  
    padding-left: 20px;
}

注意：上述 css 仅适用于 Mozilla。 请点击以下链接使其与其他浏览器配合使用

http://css-tricks.com/snippets/css/style-placeholder-text/

希望这有帮助

相关文章：