摘要：<!DOCTYPE html> <html> <head> <title>测试</title> <style type="text/css"> *{ margin: 0; display: 0; } .top{ background-
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
*{
margin: 0;
display: 0;
}
.top{
background-color: red;
}
.top-left{
float: left;
width: 20%;
}
.top-right{
float:left;
display: 0 10px;
width: 80%;
}
.clear{
clear: both;
}
.top-h1{
text-align: center;
}
.top-z{
text-align: center;
font-size: 50px
}
.top-x{
text-align: center;
font-size: 40px
}
.divs div{
width: 100px;
height: 100px;
background-color: blue;
margin:5px 20px;
}
</style>
</head>
<body>
<div class="top">
<div class="top-left"><img src="1.jpg" width="100%"></div>
<div class="top-right">
<h1 class="top-h1">我是logo标题名在右</h1>
<div class="top-z">测试</div>
<p class="top-x">测试</p>
<p class="top-x">测试</p>
<p class="top-x">测试</p>
<p class="top-x">测试</p>
</div>
<div class='clear'></div>
</div>
<div class="divs">
<div>1</div>
<div>2</div>
<div></div>
<div>4</div>
<div>5</div>
<b></b>
</div>
<form>
<label>姓名1</label><input type="text" name="text" value="pass"><hr>
<label>姓名2</label><input name=""><hr>
<label>姓名3</label><input name="text" type="pass" value="pass"><hr>
<label>姓名4</label><input type="" name="" disabled=""><hr>
<select>
<option>1</option>
<option selected="">2</option>
<option>3</option>
</select>
<hr>
<label>姓名5</label><input type="checkbox" ><hr>
<label>姓名6</label><input type="checkbox" checked=""><hr>
<label>姓名7</label><input type="checkbox" ><hr>
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type]').css('background','pink')//匹配包含给定属性的元素
$('input[type=text]').css('background','red')//匹配属性并匹配属性内容的元素
// $('input[type!=text]').css('background','#000000')
$('div:parent').css('background','#444444')
$('div:contains(5)').css('background','#ffffff')//选中包含此文本的盒子
$('div:empty').css('background','red')//匹配元素为空的即不包含元素
$('div:has(b)').css('background','#000000')//匹配保函此标签的盒子
// $('input[value] [type=pass] [name=pass]').css('width','200px')
//所有激活的input元素
$(':enabled').css('width','500px')
$(':disabled').css('width','200px')//相反
$(':selected').css('color','#ffffff')
$(':checked').parent(). css('color','red')
})
</script>
</body>
</html>练习了下，嗯，还是有些搞不清楚，不过应该多测试就能明白了！
批改老师：灭绝师太批改时间：2018-11-13 09:31:42
老师总结：有很多选择器用法很类似，注意区分开，多测试一下应该就可以搞明白的；
