5

Bootstrap 2.3.1 には、次の部分があります。

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

WordPressでBootstrapを使いたい。WordPress では、 の代わりに.activeという名前のクラスがあり.current-menu-itemます。したがって、ブートストラップ CSS に触れたくない場合、およびカスタム スタイルシートで、次のようにわずかな違いで同じコードを繰り返したい場合:

.dropdown-menu > .current-menu-item > a { bla bla bla }

新しい考え?

  • これらのクラスを表す新しい方法はありますか、単に.a=のようなもの.bですか?

私の例では:

.dropdown-menu > .active > a = .dropdown-menu > .current-menu-item > a,
.dropdown-menu > .active > a:hover = .dropdown-menu > .current-menu-item > a:hover,
.dropdown-menu > .active > a:focus = .dropdown-menu > .active > a:focus { bla bla bla }

コンマで区切られたクラスだけでそれができることは知っていますが、そのようにしてステートメントを再度言及する必要があります。私はそのような巨大なコードブロックの繰り返しを望んでいません。

4

2 に答える 2