כמו בחיים גם ב-CSS יש מקום לאי הבנות, במקרה של CSS הסכסוכים נובעים מכך שמספר כללי מתנגשים יכולים לחול על אותו האלמנט. בדוגמת הגלריה מהחלק הקודם, הבה נוסיף כלל CSS המתיחס לגבול התמונות שמחוץ לגלריה:

.gallery img {
  border: 5px solid blue;
  border-radius: 10px;
}

img {
  border: 2px solid red;
  padding:10px;
}

אלמנט img שנמצא תחת אלמנט עם קלאס .gallery מתאים לשני הכללים. אין ספק שאלמנט כזה יקבל padding בגודל 10 פיקסלים ו border-radius של 10 פיקסלים גם כן, הסכסוך הוא לגבי מאפיין border.

הדרך המרכזית לפתור סכסוכים ב CSS הינה באמצעות בחינת הבורר בו השתמשנו (זה החלק שמשמאל לסוגריים המסולסלים) ודירוג הבוררים השונים לפי עדיפויות. החישוב עובד בערך כך [1]:

1. תחילה נספור כמה ID Selectors קיימים בכל כלל. הכלל עם יותר ID Selector מקבל עדיפות.
2. במידה ומספר ה ID Selectors זהה, נעבור לספור כמה Class Selectors יש בכל שורה. הכלל המורכב מיותר class selectors מקבל עדיפות.
3. במידה וגם מספר ה Class Selectors זהה, נספור כמה Type Selectors מופיעים בכל כלל. הכלל עם יותר Type Selectors מקבל עדיפות.
4. במידה וגם מספר ה Type Selectors זהה, הכלל שמופיע אחרון מקבל עדיפות.

ברור כעת כי בדוגמא שהצגנו התמונה שבתוך הגלריה תקבל גבול בצבע כחול, מאחר ובכלל .gallery img קיימים יותר Class Selctors מאשר בכלל המתחרה.

[1] פירוט מלא לגבי אופן החישוב אפשר למצוא בתיעוד כאן:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity