我可以在CSS中多次应用ID吗? [英] can I apply IDs more than once in CSS?

查看:130
本文介绍了我可以在CSS中多次应用ID吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是一个初学者的问题,但我需要澄清。
根据大多数教程,它不能多次应用。



ID是唯一的

每个元素只能有一个ID

每个页面只能有一个具有该ID的元素


参考
http://css-tricks.com/the-difference-between-id-and-class/



但是我在HTML中写了一个简单的标记并应用了一些CSS。



/ p>

HTML

 <!DOCTYPE html> 
< html>
< head>
< title> ID vs类< / title>
< link rel =stylesheettype =text / csshref =ID& Classes.css>
< / head>
< body>
< h1 id =forh1>这是一个h1标头< / h1>
< p> Lorem ipsum dolor sit amet< / p>

< h1 id =forh1>这是一个h1标头< / h1>

< p> Curabitur sodales ligula< / p>

< h2 id =forh1>这是一个h2标头< / h2>
< / body>
< / html>

CSS

 #forh1 {
text-align:center;


}

一次(3次)。在h1标题中有两次,在h2标题中有一次。当我在浏览器中运行它(chrome& firefox),他们工作完美。 h1和h2标题中的所有文本都对齐中心。这是为什么 ?我没有正确地掌握ID概念或者是浏览器的问题吗?因为我听说现代浏览器足够聪明,能够理解大多数隐含的东西。请帮助。

解决方案

ID用于唯一地标识元素,它们将工作到CSS,但是当JavaScript开始行动,你就会明白为什么不这样做。



CSS只是选择元素,当你写一个匹配的选择器,它与你写的有效或无效的HTML无关,CSS的工作是应用样式每选择器定义。例如



演示 无效HTML,请勿使用




b

因此, ID 的应该是唯一的,如果要使用相同的属性,请使用 class 对多个元素。



W3C


此属性为元素分配名称。此名称在文档中必须是唯一的







使用 _ 而不是空格 href =ID& Classes.css href =IDs_Classes.css。



这是一个很好的阅读,为什么不这样做 (这里不再重复)


This is a beginner's question, but I need to clarify it. Yes according to most of the tutorials it cannot be applied more than once.

ID's are unique
Each element can have only one ID
Each page can have only one element with that ID

Reference http://css-tricks.com/the-difference-between-id-and-class/

But I wrote a simple mark-up in HTML and applied some CSS.

Here is my code

HTML

<!DOCTYPE html>
<html>
<head>
    <title>ID vs Classes</title>
    <link rel="stylesheet" type="text/css" href="ID & Classes.css">
</head>
<body>
    <h1 id="forh1">This is a h1 header</h1>
    <p>Lorem ipsum dolor sit amet</p>

    <h1 id="forh1">This is a h1 header</h1>

    <p>Curabitur sodales ligula</p>

    <h2 id="forh1">This is a h2 header</h2> 
</body>
</html>

CSS

#forh1{
text-align:center;


}

I have applied the same ID more than once (3 times). Two times in h1 header and one time in h2 header. When I run it in browser (chrome & firefox) they worked perfectly. All text in h1 and h2 headers were aligned center. Why is that ? Have not I grasped ID concept properly or is it an issue with the browser? Because I have heard modern browsers are smart enough to understand most of the implicit things. Please help.

解决方案

ID's are meant to use for identifying elements uniquely, they will work as far as CSS goes, but when JavaScript comes into action, you will understand why not to do so.

CSS just selects the element, when you write a matching selector, it has nothing to do with valid or invalid HTML you write, the job of CSS is to apply styles as per the selector defined. For example

Demo INVALID HTML, DO NOT USE IT (only for demonstration purpose)


Hence, ID's should be unique,, use class if you want to use the same properties on multiple elements.

From W3C

This attribute assigns a name to an element. This name must be unique in a document.


Side tip: Use _ instead of spaces href="ID & Classes.css" should be href="IDs_Classes.css".

Here's a good read, on why not to do that (So won't repeat here)

这篇关于我可以在CSS中多次应用ID吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆