2.3.5　特殊元素样式

所谓特殊元素，即特定类型的组件一般只使用某一种或者几种固定的元素，比如alert警告框内一般只用警告标题、内容和关闭链接元素，再如导航（nav）里的经常用的li元素。在定义这些组件的时候，也要为这些常用的元素定义其相关的默认样式。这两个组件对常用特殊元素的样式定义如下所示：

  1. // 源码 4444 行
  2. .alert .alert-link {  font-weight: bold;        /* alert内的链接样式 */}
  3. .alert > p,.alert > ul {  margin-bottom: 0;     
  4.                                         /* alert内的p元素和ul元素的底部外边距设置 */}
  5. .alert > p + p {  margin-top: 5px;              /*两个段落之间,增加一个顶部外边距*/}
  6. .alert-dismissable { padding-right: 35px;       /* 增大右内边距,以便关闭按钮*/}
  7. .alert-dismissable .close {                     /* 警告框内,如果设置关闭按钮,特殊处理 */
  8.   position: relative;
  9.   top: -2px;
  10.   right: -21px;                                 /* 关闭按钮,右对齐 */
  11.   color: inherit;
  12. }
  13.  
  14. // 源码 3462 行
  15. .nav > li {
  16.   position: relative;                           /*所有的菜单项都是相对定位*/
  17.   display: block;                                       /* 块级显示*/
  18. }
  19. .nav > li > a {
  20.   position: relative;                           /* a链接相对定位*/
  21.   display: block;                                       /* 块级显示*/
  22.   padding: 10px 15px;                           /* 外边距保留稍微大一些*/
  23. }
  24. .nav > li > a:hover,.nav > li > a:focus {       /* 移动或焦点时链接的显示效果*/
  25.   text-decoration: none;
  26.   background-color: #eeeeee;                    /* 链接移动或焦点时,背景色变为灰色*/
  27. }
  28. .nav > li.disabled > a {  color: #999999;       /* li上禁用时的链接颜色*/}
  29. .nav > li.disabled > a:hover,
  30. .nav > li.disabled > a:focus {
  31. /* li上禁用时,移动到链接上时的各种处理*/
  32.   color: #999999;                                       /* 颜色变灰*/
  33.   text-decoration: none;
  34.   cursor: not-allowed;
  35.   background-color: transparent;
  36. }

特殊元素所定义的样式不固定，这取决于是什么样的特殊元素，有的是定义内外边距，有的是自定颜色和背景色，具体元素具体对待。大家在分析源码的时候，一定要结合元素的特性进行分析，比如a链接元素，不仅可以设置内外边距，还可以设置文本颜色，甚至可以设置这些样式在hover、focus状态时的情况。

如果在这些组件内部使用的不是这些常用的特殊元素，而且其他相关的元素，那么就需要自己为这些特殊的情况定义相关的样式了，不然很有可能不符合默认组件的风格。定义的时候，还要考虑默认情况下是什么样式、和颜色样式搭配时又是什么样式，以及设置大小尺寸时要设置多少边距等。总之，要为各种情况设置相应的内容，以保持风格的统一。