CSS <div class="">和<div id="">CSS 之间的区别是什么?可以使用<div id="">吗?
我看到不同的开发人员在这两方面做到这一点,因为我自学成才,我从来没有真正弄明白.
<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
Run Code Online (Sandbox Code Playgroud)
在这里,我给了一个id到div元素,它的应用相关的CSS它.
要么
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
Run Code Online (Sandbox Code Playgroud)
现在,这里我给class的div,它也做同样的工作对我来说.
那么Id和类之间的确切区别是什么?id我应该何时使用以及何时应该使用class.?我是CSS和网页设计的新手,在处理这个问题时有点困惑.
当使用div时,最好使用class vs id吗?
是否最好使用类,在字体变体或html中的元素?然后使用id作为结构/容器?
这是我一直有点不确定的事情,任何帮助都会很棒.
让我们考虑这两种编写相同代码的方法:
方法1
<div id="header">
<div id="user">
<a id="userName">Username</a>
<a id="userImage">Userimage</a>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
方法2
<div id="header">
<div class="user">
<a class="name">Username</a>
<a class="image">Userimage</a>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
方法1的CSS
#userName { color: white; }
#userImage { height: 50px; width: 50px; }
Run Code Online (Sandbox Code Playgroud)
方法2的CSS
#header div.user a.name { color: white; }
#header div.user a.image { height: 50px; width: 50px; }
Run Code Online (Sandbox Code Playgroud)
在我看来,方法2更干净,因为你永远不会得到像这样的ID userImageInnerBox.从技术上讲,哪种方法最好,为什么?
jQuery中class和id有什么区别?例如:
<span class="lalal"></span>
Run Code Online (Sandbox Code Playgroud)
和
<span id="lalal"></span>
Run Code Online (Sandbox Code Playgroud)
因为一个适用于jQuery而另一个不适用.谢谢.
我正在浏览CSS:Class和ID.当我尝试他们给出的例子时,我不会觉得它们之间存在任何差异.
<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<h1 id ="para1">Hai</h1>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
给我输出我想要的地方说id选择器用于指定单个唯一元素的样式.
我是以错误的角度看待这个吗?