https://www.w3cschool.cn/css/css-style.html
选择器
id选择器
·类选择器（.）
·元素选择器（p）
·后代选择器（div p）
·子元素选择器（>）
·相邻兄弟选择器（+）
·普通相邻兄弟选择器（~）
·伪类选择器（property:value）
{
a:link
a:hover
a:visited
div:first-child 元素的第一个子元素
}
$(document).ready(function(){
$('#t2').css('border','5px solid red')
$('.t1').css('border','5px dashed blue')
$('#pwd>input').css('border','5px solid red')
$('.change>input').css('border','2px solid red')
$('ul>ul>li').css('border','2px solid red')
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/jquery-1.12.3.min.js"></script>
<script>
h3 {
margin: 0;
}
div, p {
width: 100 px;
height: 100 px;
float: left;
padding: 10 px;
margin: 10 px;
border: 1 px solid gray;
}
</script>
</head>
<body>
<h3>jQuery元素选择器示例</h3>
<hr>
<div id="t2">我是DIV元素</div>
<p class="t1">我是P元素</p>
<div>我是DIV元素</div>
<p>我是P元素</p>
<h3>jQuery表单选择器示例</h3>
<hr>
<!--表单-->
<form method="post" action="URL">
<label>用户名：
<input type="text" name="username" required />
</label>
<br />
<label>密 码：
<input type="password" name="pwd" required />
</label>
<br />
<label>确 认：
<input type="password" name="pwd" required />
</label>
<br />
<label>姓 名：
<input type="text" name="name" required />
</label>
<br />
<label>邮 箱：
<input type="email" name="email" required />
</label>
<br />
<button type="submit">提交注册</button>
</form>
<div>
<ul>
<li>第一个<li>
<ul>
<li>1.1</li>
<li>1.1</li>
</ul>
</ul>
</div>
<div class="plus">第一个div</div>
<div class="plus">第一个div</div>
<script>
$(document).ready(function() {
$('#t2').css('border', '5px solid red')
$('.t1').css('border', '5px dashed blue')
$('form>label>input').css('border', '2px solid red')
$(".change>input[type='text']").css('border', '2px solid red')
$('li~li').css('border', '2px solid red')
$("input[type='text']").css('border','2px dashed blue')
$('.plus+').css('border','2px dashed blue')
})
$(function(){
$('.plus+').css('border','2px dashed red')
})
</script>
</body>
</html>
