【css】css通过条件指定标签样式

css通过条件指定标签样式

设置元素id为指定值时的css样式

指定div的class为form-holder-inner下form标签下input标签的id="username"的元素样式

.modal .modal-inner .modal-body .form .form-holder .form-holder-inner form input#username {
    background-color: #e65b0d;
    position: absolute;
    display: block;
    width: 180px;
    height: 64px;
    border: none;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    line-height: 64px;
    top: 0;
    right: 0;
  }

<div class="modal invisible">
      <div class="modal-inner"><p class="close"><span></span></p>
        <div class="modal-body">
          <div class="form">
            <div class="form-holder">
              <div class="form-holder-inner">
                  <form><div class="group">
                      <input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off">
                      <input type="text" name="password" id="password" placeholder="请输入密码" autocomplete="off">
                  </div>
                  <div class="submit">
                    <input type="submit" class="submit-btn" value="Submit" disabled="disabled">
                  </div></form>
                  </div></div></div></div></div>
</div>

设置元素class为指定值时的css样式

指定div的class为form-holder-inner下form标签下input标签的class="submit-btn"的元素样式

.modal .modal-inner .modal-body .form .form-holder .form-holder-inner form input.submit-btn {
    background-color: #e65b0d;
    position: absolute;
    display: block;
    width: 180px;
    height: 64px;
    border: none;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    line-height: 64px;
    top: 0;
    right: 0;
  }

<div class="modal invisible">
      <div class="modal-inner">
        <p class="close"><span></span></p>
        <div class="modal-body">
          <div class="form">
            <div class="form-holder">
              <div class="form-holder-inner">
                <form>
                  <div class="submit">
                    <input type="submit" class="submit-btn" value="Submit" disabled="disabled">
                  </div>
                </form></div></div></div></div></div>
</div>

设置元素某属性为指定值时的css样式

指定属性的几种方式：

元素含有指定属性：[属性名]
例如：[type]，<input type="text" name="username" id="user"> 含有type属性

属性名为指定值（全匹配）：[属性名=属性值]
例如：[type=text]，<input type="text" name="username" id="user"> type的值为text

属性以指定值开头：[属性名^=属性值]
例如：[type^=te]，<input type="text" name="username" id="user">

属性以指定值结尾：[属性名$=属性值]
例如：[type$=xt]，<input type="text" name="username" id="user">

属性含有指定值：[属性名*=属性值]
例如：[type*=ex]，<input type="text" name="username" id="user">

指定div的class为form-holder-inner下form标签下input标签的type="text"的元素样式

.modal .modal-inner .modal-body .form .form-holder .form-holder-inner form input[type=text] {
    background-color: #e65b0d;
    position: absolute;
    display: block;
    width: 180px;
    height: 64px;
    border: none;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    line-height: 64px;
    top: 0;
    right: 0;
  }

<div class="modal invisible">
      <div class="modal-inner">
        <p class="close"><span></span></p>
        <div class="modal-body">
          <div class="form">
            <div class="form-holder">
              <div class="form-holder-inner">
                <form>
                  <div class="group">
                      <input type="text" name="username" id="user" placeholder="请输入用户名" autocomplete="off">
                      <input type="text" name="password" id="pwd" placeholder="请输入密码" autocomplete="off">
                  </div>
				</form></div></div></div></div></div>
</div>