如何仅为单个div类设置CSS样式，避免.yui3-widget-bd全局生效？

Since you can’t modify the HTML in Liferay, the solution hinges on boosting your CSS selector specificity to target only the .yui3-widget-bd inside your intended portlet—no global side effects required.

Adjusted CSS Code #

.col-md-9 { 
  float: left; 
  width: 80%; 
} 

.scheduler-view-agenda { 
  width: 270px; 
} 

/* Target only .yui3-widget-bd inside the specific Calendar portlet */
#portlet_com_liferay_calendar_web_portlet_CalendarPortlet .yui3-widget-bd { 
  width: 270px; 
  height: 390px; 
} 

.calendar-portlet-mini-calendar { 
  width: 270px; 
} 

#portlet_com_liferay_calendar_web_portlet_CalendarPortlet { }

Why This Works #

• Liferay assigns a unique ID to every portlet (in your case, #portlet_com_liferay_calendar_web_portlet_CalendarPortlet), which acts as a unique container for your target elements.
• Using the descendant selector (#portlet-Id .yui3-widget-bd) makes your rule far more specific than a standalone .yui3-widget-bd selector. This ensures styles only apply to the .yui3-widget-bd inside that exact portlet, leaving all other instances untouched.

Even More Precise Alternative #

If .yui3-widget-bd sits directly inside .calendar-portlet-mini-calendar, you can combine selectors for tighter targeting:

.calendar-portlet-mini-calendar .yui3-widget-bd {
  width: 270px;
  height: 390px;
}

This works because .calendar-portlet-mini-calendar is a class unique to your mini calendar, so styles won’t leak to unrelated components.

Either approach fixes your global styling problem without touching a single line of HTML!

内容的提问来源于stack exchange，提问作者bernieg