<body>
<ul>
<li class="one">1</li>
<li>2</li>
<li id="ss">3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="a">
<div class="b">11</div>
<div class="c">22</div>
<div class="d">33</div>
<div class="e">44
<div class="c">22</div>
</div>
<p name="nj">南京</p>
<p name="bj">北京</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 全局选择器
$('*').css({
fontSize: '12px'
})
// id选择器
$('#ss').html('三')
// 类选择器
$('.one').html('一')
// 标签选择器
// $('li').css('fontSize', '30px')
$('li').css({
fontSize: '30px'
})
// 后代选择器
$('.a .c').css({
color: 'pink'
})
// 子选择器 层级选择器
$('.a>.c').css({
color: 'blue'
})
// 相邻兄弟选择器 获取下一个元素
$('#ss+li').css({
backgroundColor: 'blue'
})
//通用兄弟选择器 位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素
$('#ss~li').css({
backgroundColor: 'yellow'
})
// 属性选择器
$('p[name="nj"]').css({
backgroundColor: 'pink',
color: 'white'
})
</script>
</body>
<style>
table {
border-collapse: collapse;
width: 800px;
height: 500px;
font-weight: 900;
}
td,
th {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// $('tr:nth-child(odd)').css({ //奇数行
// backgroundColor: 'blue'
// })
// $('tr:nth-child(even)').css({ //偶数行
// backgroundColor: 'pink'
// })
$('tr:odd').css({ //这种写法下标是从0开始，奇数就是从1开始，也就是第二行
backgroundColor: 'blue'
})
$('tr:even').css({ //
backgroundColor: 'pink'
})
// 首行
$('tr:first').css({
backgroundColor: 'black'
})
// 最后一行
$('tr:last-child').css({
backgroundColor: 'black'
})
// 第几行
$('tr:nth-child(5)').css({
backgroundColor: 'red'
})
//指定第几个位置 下标从o开始
$('tr:eq(5)').css({
backgroundColor: 'green'
})
// gt 下标大于5后面的全被选
$('tr:gt(5)').css({
fontSize: '30px'
})
// lt 下标小于5的全被选
$('tr:lt(5)').css({
color: 'white'
})
// not 去除某个
$('tr:not(:first)').css({
fontStyle: 'italic',
fontWeight: 1500
})
$('tr:not(:eq(3))').css({
fontStyle: 'italic',
fontWeight: 700
})
</script>
</body>
<body>
<div class="a">
<h1>Hello</h1>
<h2>World</h2>
<ul>
<p>11</p>
<p>22</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li id="five">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<p>33</p>
<p>44</p>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let five = $('#five') //获取的是一个集合
// siblings()返回同级的所有元素
// five.siblings().css({
// fontsize: '30px'
// })
// prev()， 返回同级的上一个元素
five.prev().css({
color: 'red'
})
// 可以一直点
five.prev().prev().css({
color: 'red'
})
// prevAll()，返回同级上面的所有元素
five.prevAll().css({
color: 'red'
})
// next()同级的下一个元素
five.next().css({
color: 'blue'
})
// nextAll()同级的下面所有元素
five.nextAll().css({
color: 'blue'
})
// 返回自己的父元素
five.parent().css({
border: '1px solid #eee'
})
// parent().children('p')
five.parent().children('p').css({
border: '1px solid yellow'
})
// parents('.a') 上面所有的父元素，括号里面写父元素的选择器就是到哪一块
five.parents('.a').css({
border: '1px solid #eee'
})
let a = $('.a')
a.find('ul').css({
background: 'green'
})
a.find('ul').find('li').first().css({
fontsize: '20px'
})
</script>
