CSS，选择特定的类和类型

Question

我不是 CSS 的专家，我想 select 从 id 开始而不使用 JavaScript

不幸的是HTML代码是自动生成的，我无法设置一些已定义的class...

Select id="main" -> class="ui-footer ui-bar-inherit ui-footer-fixed slideup" -> (select fisrt Div) -> (select first UL) -> (select class="ui-block-a") - > (select a)

这是我的 HTML 代码，我应该在什么地方填写？？？在风格上？

#main>??? {
  /*my CSS Code*/
}

<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

你可以跳过很多类

#main .ui-block-a a {
  color:red
}

<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

你可以像你写的那样做...

您可能可以跳过中间的一些内容，具体取决于实时使用代码。

#main .ui-footer.ui-bar-inherit.ui-footer-fixed.slideup div:first-of-type ul:first-of-type .ui-block-a a{
  color: red !important;
}

#main .ui-footer.ui-bar-inherit.ui-footer-fixed.slideup div:first-of-type ul:first-of-type .ui-block-a a{
  color: red !important;
}

<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

正如我已经提到的。这真的取决于你是否真的能影响你的 html-generator 的结果。

如果可以，那么只添加一个特定的 class 可能是可行的方法。否则，我建议您使用 classes 而不是 ids 进行样式设置。

您只需按照样式的要求进行具体操作即可。如果一种样式比另一种样式更具体，它将被覆盖。 + 或 > 等选择器为规则增加了更多的“力量”。大多数情况下，只需组合几个选择器就可以达到您的目标。

问题还在于：您不想过分依赖 html-结构来获得体面的样式。事实上，使用 classes，您可以按任何顺序使用几乎所有元素。

.ui-block-a a {
  color: green;
}

<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
  <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
    <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1" />
  </div>
  <div class="ui-content" role="main">
    <div class="voOutput" id="titlePrompt" />
    <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
      <div class="ui-controlgroup-controls ">
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
        <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
      </div>
    </div>
  </div>
  <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
    <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
      <ul class="ui-grid-solo">
        <li class="ui-block-a">
          <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 4

如果您在页脚中有多个 UL-s，您可以尝试这样的操作

#main .ui-footer div:first-child ul:first-child .ui-block-a a {
  background-color:red;
}

<div data-role="page" id="main" data-url="..." data-external-page="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-footer-fixed ui-page-active" style="padding-top: 42px; padding-bottom: 35px; min-height: 735px;">
        <div data-id="navHeaderDiv" data-position="fixed" data-role="header" role="banner" class="ui-header ui-bar-inherit ui-header-fixed slidedown">
            <h1 id="cxpTitleH1" class="ui-title" role="heading" aria-level="1"/>
        </div>
        <div class="ui-content" role="main">
            <div class="voOutput" id="titlePrompt"/>
            <div data-role="controlgroup" id="groupDiv" class="ui-controlgroup ui-controlgroup-vertical ui-corner-all">
                <div class="ui-controlgroup-controls ">
                    <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-first-child" href="..." id="menu_11InfoGeneral_Misin">Misión</a>
                    <a class="ui-btn ui-shadow ui-corner-all voMenuItem" href="..." id="menu_11InfoGeneral_Visin">Visión</a>
                    <a class="ui-btn ui-shadow ui-corner-all voMenuItem ui-last-child" href="..." id="menu_11InfoGeneral_NuestrasSedes">Nuestras Sedes</a>
                </div>
            </div>
        </div>
        <div data-id="navFooterDiv" data-position="fixed" data-role="footer" role="contentinfo" class="ui-footer ui-bar-inherit ui-footer-fixed slideup">
            <div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation">
                <ul class="ui-grid-solo">
                    <li class="ui-block-a">
                        <a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Regresar a Menú Principal</a>
                    </li>
                </ul>
                <ul>
                  <li><a class="voNavigationItem ui-link ui-btn ui-icon-back ui-btn-icon-right" data-icon="back" data-iconpos="right" href="..." id="menu_11InfoGeneral_1">Second link</a> </li>
                </ul>
            </div>
        </div>
    </div>

CSS，选择特定的类和类型

CSS, selecting with specific Classes and types

html

css

css-selectors

CSS，选择特定的 类 和类型

CSS, selecting with specific Classes and types

html

css

css-selectors

CSS，选择特定的类和类型