[Vuejs]-What is the difference between id selector and class selector when using border style

by

4👍

✅

Without seeing the other CSS that might be involved, the likely answer is CSS specificity.

There are many guides to CSS specificity out there such as this one, but the general math for CSS specificity is:

  • element selectors such as div = 1
  • class selectors such as .edit-input = 10
  • id selectors such as #title = 100

Because #id is such a heavily-weighted selector, it’s a good idea to avoid using ids as selectors in CSS as much as possible. They’re much harder to override in subsequent styling.

If other styling in the page includes a rule such as this (for example):

div .edit-input { /* selector "weight": 11 */
  border: 1px solid #DFE1E7;
}

Then this subsequent rule will have no effect, because it’s less specific:

.edit-input { /* selector "weight": 10 */
  border: 0;
}

You’ll need to provide a selector that is at least as specific, if not more so. Perhaps something like this:

.el-input .edit-input { /* selector "weight": 20 */
  border: 0;
}

To get this right, inspect the element using your browser’s Web Inspector tools, and see what other CSS is getting applied. Then write your own CSS with enough specificity to override the existing default styling.

👤simmer

Leave a comment