id选择器和class选择器

id选择器

id选择器用来选取带有给定id属性的元素。语法:#id例如:

html
<div id="container">...</div>

css
#container {
  color: blue;
}

id选择器的一些特征:

1. id选择器以#号开头,后跟元素的id属性值。

2. id选择器只能选取带有给定id属性的元素。

3. id的值在整个文档中必须是唯一的。

4. id选择器的优先级高于标签选择器和类选择器,为100。

5. id选择器可用于任何元素,不仅仅是CSS,也常用于Javascript获取元素。

6. id选择器创建了强关联,不建议给相同元素的不同实例使用相同的id值。注意:由于id在文档中必须唯一,所以id选择器实际上选取的永远只有一个元素。所以id选择器的命名需要非常准确和语义化,反映选取元素的准确性质和用途。id选择器的优先级很高,一般不建议和标签选择器或类选择器 一起使用,如:

css
div#container {...}  /* 不推荐 */
.redContainer#container {...} /* 不推荐 */

这会使规则变得难以理解和维护。
除非必要,否则推荐尽量使用类选择器代替id选择器。id选择器在CSS中的主要用途是创建强关联,为元素指定唯一的id,在其它语言(如JS)中选取该元素。在仅用CSS的情况下,更推荐使用类选择器来达到选取元素的目的。

总之,理解id选择器的特性,合理使用可以带来许多便利,但也需要注意一些使用注意点。在可能的情况下,更推荐使用类选择器。希望这能帮助你更好地理解和使用id选择器!如果有任何疑问,欢迎提出。 

id选择器和class选择器区别比较

id选择器和class选择器都是CSS中常用的选择器,但它们有以下几点不同:1. 语法
id选择器:#id
class选择器:.class2. 个数
id选择器在页面中只能使用一次,class选择器可以使用多次。

3. 优先级
id选择器的优先级高于class选择器,为100。class选择器为10。

4. 作用
id选择器更适合作为JS中的hook来选取元素,而class选择器更适合分类样式。举个例子:

html
<div id="container" class="main">...</div>

css
#container {
  /* 选取id为container的元素 */
}

.main {
  /* 选取所有class为main的元素 */ 
}

可以看到,id选择器选取了唯一的container元素,而class选择器可以选取所有带有main类的元素。

根据以上区别,id选择器和class选择器在不同场景下有不同的使用建议:

1. 作为JS hook选取元素,使用id选择器。由于id在页面中唯一,方便选取对应的元素,所以作为JS的选择器,id是更好的选择。

2. 分类样式,使用class选择器。
class选择器可以在页面中多次使用,所以更适合对具有相同样式的元素进行分类和选择。

3. 实现强关联,使用id选择器。
如果想为一个元素在CSS和JS中都创建强关联,应该优先考虑使用id选择器。

4. 优先级要求高,使用id选择器。如果元素样式的优先级要求很高,使用id选择器可以实现。但这通常意味着CSS规则会变得难以理解和维护,所以不推荐过度使用。

5. 在不影响上述场景的前提下,优先使用class选择器。
除非有明确的理由使用id选择器,否则应该优先考虑使用class选择器。这可以让CSS规则更加清晰和易维护。所以总结来说,理解id选择器和class选择器的区别和使用场景,能够让你的代码更加语义化和规范。

在实际使用中,也要考虑到可维护性,尽量避免滥用id选择器。

使用场景

 

在实际开发中，我想实现上面的效果，那么我的边框该如何设计？

你会如何设计边框？单纯重复增加多个列表消息当然好设计，那么不同类型的列表呢？

比如下面，你会怎么设计呢？

 

我的设计是每一个消息view视图，我只设置下面的边框；然后用id选择器对首尾分别设置上下边框；就和小学每隔3米种一棵树的问题类似

 当然这样的设计仍然是欠缺的，比如这是死的数据，当数据来自后端的时候，你这border还要这样写吗，当然不，仍然随着实际开发和需求冲突而不断改变