示例

Question

应该使用哪种CSS选择器方法来识别页面特定范围内的元素？

在这里，＆＃34;范围＆＃34;指具有ID的元素;所有后代元素都在其范围内这样做的目的是确保可以命名和识别其中的元素，而不必担心选择不相关的元素。这与在java / c＃

中使用包/命名空间的原因相同

示例

我的网站每页都有一个反馈按钮。单击时，反馈容器将显示在页面的侧面。其中包括一段说明，一个textarea和一个提交按钮。这3个元素中的每一个都需要一种彼此不共享或页面其余部分不共享的特定样式我应该给出这些元素的ID和/或类的约定，以及我的样式表应如何选择它们，以便它们保持其范围并且不与其他页面元素重叠？
我设想了两个选项......

选项1：完全限定ID

子元素ID以其父元素的ID为前缀。

在此示例中，主容器将具有ID feedback。内部元素将分别具有ID feedbackInstructions，feedbackSubmission和feedbackSend。然后，CSS将仅通过ID选择每个元素我不希望按元素类型选择作为根的后代（例如#feedback textarea），以防我稍后添加该类型的更多元素，并且不希望它们共享样式。我想非常具体地说明我选择的是哪个元素。

优点：命名很明确;唯一ID确保不与其他页面元素重叠

缺点：进一步的元素嵌套需要不断增加的ID名称长度（feedbackInstructionsForUsers，feedbackInstructionsForAdmins等。

＆＃13;

#feedback {
  border: 2px solid black;
}

#feedbackInstructions {
  color: green;
}

#feedbackInstructionsForUser {
  color: purple;
}

#feedbackInstructionsForAdmin {
  color: violet;
}

#feedbackSubmission {
  color: blue;
}

#feedbackSend {
  color: orange;
}

＆＃13;

<div id="feedback">
  <p id="feedbackInstructions">
    Ok, here's what to do...
    <p id="feedbackInstructionsForUser">as a regular user...</p>
    <p id="feedbackInstructionsForAdmin">as an administrator...</p>
  </p>
  <form>
    <textarea id="feedbackSubmission"></textarea>
    <input type="submit" id="feedbackSend" />
  </form>
</div>

<p id="siteInstructions">
  My ID doesn't conflict with what's in the feedback box
</p>

＆＃13;

选项2：作为后代的类

子元素具有描述性的类名。它们被选为根的后代。

在此示例中，主容器仍具有ID feedback。但是，内部元素现在具有类名instructions，submission和send。 CSS选择器看起来像这样，#feedback .instructions，#feedback .submission和#feedback .send。

优点：类名不需要前缀;进一步嵌套不需要延长类名（选为#feedback .instructions .forUsers和#feedback .instructions .forAdmins）

缺点：不保证类名对于页面是唯一的，并且可能会受到其他样式表的影响（我正在与团队合作并且无法完全控制它）;当单独观察元素时，类名不提供完整的上下文信息（指示什么？哦，它在反馈div中）

＆＃13;

#feedback {
  border: 2px solid black;
}

#feedback .instructions {
  color: green;
}

#feedback .instructions .forUser {
  color: purple;
}

#feedback .instructions .forAdmin {
  color: violet;
}

#feedback .submission {
  color: blue;
}

#feedback .send {
  color: orange;
}

.instructions {
  color: grey;
}

＆＃13;

<div id="feedback">
  <p class="instructions">
    Ok, here's what to do...
    <p class="forUser">as a regular user...</p>
    <p class="forAdmin">as an administrator...</p>
  </p>
  <form>
    <textarea class="submission"></textarea>
    <input type="submit" class="send" />
  </form>
</div>

<p class="instructions">
  Opps, my class may conflict with something in the feedback box if I'm not careful
</p>

＆＃13;

结论

这两个选项中的一个比另一个好吗？有没有第三种解决方案更适合这种情况？是否有更好的解决方案使用是一般的？
通过“更好”，我的意思是说我正在寻找一种优雅，可长期维护和/或广泛使用的方法。

Answer 1

为了便于维护，选项1会更好。在任何情况下，您都可以使用开发人员工具轻松查找类，并且每个元素都可以高度自定义。在这种情况下会有很多重复的样式。

我的建议是将两个选项混合使用，选项2用于大多数页面上的常用元素，选项1用于需要自定义的元素，与其他页面相比是唯一的。

如果许多元素共享相同的样式并且通常不会被触摸（将其存储在css文件的顶部以便于分类，或者您可以根据网页的部分进行切片，例如＆＃34; banner＆＃34;，＆＃34 ;新闻＆＃34;等），你可以做到

element1, element2, element3 {
color:red
}

然后单独定制每个元素。

element 1 {
width:100%
}
element 2{
width:50%;
}
element 3{
width: 10%;
}

示例样式表：

//banner
element1 ,element2, element3 {
background: black;
color: yellow;
}
//end of banner
element1 {
width: 10%;
}
element2 {
margin: 0 auto;
}

//news
newselement1 ,newselement2, newselement3 {
background: transparent;
color: black;
}
//end news

newselement1 {
width: 10%;
}
newselement2 {
margin: 0 auto;
}

这是我的造型方式。其他人也可以纠正我，所以我可以了解别人在做什么。：）

选择结构范围内的元素

示例

选项1：完全限定ID

选项2：作为后代的类

结论

1 个答案: