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>