标签：jQuery solid 标签 li border 选择器 css
<!DOCTYPE html>
<html>
<head>
<title> jquery</title>
<style type="text/css">
body{
padding-bottom: 1000px;
}
ul{
width: 500px;
margin: 0;
padding:0;
list-style: none;
}
li{
padding:20;
margin-top: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!-- 基础选择器 -->
<ul id="list1">
<li>red</li>
<li class="red">blue</li>
<li>yellow</li>
</ul>
<ul id="list2">
<li>pink</li>
<li>black</li>
<li class="red ">whitel</li>
</ul>
<p class="red">我是p标签----基础选择器</p>
<!-- 层级选择器 -->
<div>
<a href="#" class="link">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<p>
<a href="#">链接5</a>
</p>
</div>
<!-- 属性选择器 -->
<ul id="ulColor">
<li class="red">color1</li>
<li title="blue">color2</li>
<li title="css-1">color3</li>
<li id="color1-green">color4</li>
<li id="red-1color">color5</li>
<li lang="encnhk">color6</li>
<li lang="en cn">color7</li>
<li class="cl" name="kaivon">color8</li>
</ul>
<!-- 基础过滤选择器 -->
<ol id="olCorlor">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li lang="cn">1</li>
<li id="tar">1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<!-- 子元素过滤器 -->
<div id="paragraph">
<p>段落</p>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
<p>段落</p>
<span>段落1</span>
<p>段落</p>
</div>
<div id="only">
<p>唯一一个子元素</p>
</div>
<div id="only-two">
<span>span</span>
<p>两个子元素</p>
</div>
<!-- 内容过滤器 -->
<div id="content">kaivon</div>
<div></div>
<div id="has">
<div><p>段落</p></div>
</div>
<div>
<h1 id="title">大标题</h1>
</div>
<script src="D:\JAVA相关资料包\jquery-3.2.1.js"></script>
<script >
//选择器的使用--选择器选中的是一个集合
/** 基础选择器**/
//id选择器
$('#list1').css('background','green')
//类选择器
$('.red').css('background','red');
//标签选择器
$('li').css('border','2px solid pink');
//通配符选择器
//$('*').css('border','4px solid green');
//群组选择器（多个标签一起选择
$('li,p').css('font-size','40px');
//层级选择器 ---选中的是div 下的 所有 a标签
$('div a').css('color','green');
//层级选择器 ---选中的是div 下的 儿子元素 不包含孙子元素，即第一层及
$('div>a').css('font-size','60px');
//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟（中间不能有其他标签）的一个a标签
$('div a.link + a').css('color','purple');
//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟（中间不能有其他标签）的同一层级的所有a标签
$('div a.link ~ a').css('color','blue');
//属性选择器
//先用id选择器定位 在用标签属性来选择
$('#ulColor li[class]').css('background','pink');
//先用id选择器定位 在用标签属性和属性值来选择
$('#ulColor li[title=blue]').css('background','blue');
//先用id选择器定位 在用标签的属性值不等于某个值来选择
$('#ulColor li[title!=blue]').css('background','yellow');
//属性值的前缀是CSS css-abc有-隔开的才是前缀，没有就不是
$('#ulColor li[title|=css]').css('background','hotpink');
//^以color开头的属性值 可以有- 也可以没有 ^ 以xxx开头的属性值
$('#ulColor li[id^=color]').css('background','darkgreen');
//$以color为结尾的属性值 可以有- 也可以没有 $ 以xxx结尾的属性值
$('#ulColor li[id$=color]').css('background','purple');
//属性值含有lang且属性值含有cn字符串的 * 包含字符串的属性值
$('#ulColor li[lang*=cn]').css('background','olive');
//属性值含有lang且属性值含有cn单词，单词有空格隔开 ~单词的属性值
$('#ulColor li[lang~=cn]').css('background','skyblue');
//多个属性同时满足
$('#ulColor li[class=cl][name=kaivon]').css('background','teal');
//基础过滤选择器
//通过#olCorlor定位 再通过标签索引来选择 eq等于 gt大于 lt小于
$('#olCorlor li:eq(1)').css('border','10px solid pink');
$('#olCorlor li:gt(3)').css('border','10px solid green');
$('#olCorlor li:lt(3)').css('border','10px solid yellowgreen');
//排除 not(#olCorlor li:lt(3))后面可以跟所有选择器
$('#olCorlor li:not(#olCorlor li:lt(3))').css('border','10px solid darkgreen');
//选择 even偶数 和odd基数
$('#olCorlor li:even').css('border','10px solid hotpink');
$('#olCorlor li:odd').css('border','10px solid purple');
//第一个 最后一个
$('#olCorlor li:first').css('border','10px solid olive');
$('#olCorlor li:last').css('border','10px solid skyblue');
//属性选择
$('#olCorlor li:lang(cn)').css('border','10px solid black');
//锚点 在浏览器地址后面拼接 #tar
$('#olCorlor li:target(tar)').css('border','10px solid yellow');
// 根标签
$(':root').css('border','20px solid blue');
//header-标题标签
$(':header').css('border','15px solid darkgreen');
// 子元素过滤器
//通过div定位 p:first-child #paragraph后面必须是p标签，
$('#paragraph p:first-child').css('color','pink');
//通过div定位 span:first-of-type #paragraph后面可以插入其他标签，
$('#paragraph span:first-of-type').css('color','yellowgreen');
//通过div定位 p:last-child #paragraph的最后一个子元素必须是p标签，
$('#paragraph p:last-child').css('color','hotpink');
//通过div定位 span:last-of-type #paragraph的最后一个span标签，可以是不在最后，
$('#paragraph span:last-of-type').css('color','hotpink');
//选择第二个子元素，且第二个子元素必须为p标签，否则无效
$('#paragraph p:nth-child(2)').css('color','blue');
//选择#paragraph中的第二个span标签，索引可以不是2 ，位置随意
$('#paragraph span:nth-of-type(2)').css('color','olive');
//选择到只有一个子元素的标签 只含有一个p，不能在含有其他标签
$('#only p:only-child').css('color','olive');
//选择到#only-two 只含有一个span，可以含有其他标签
$('#only-two span:only-of-type').css('font-size','20px');
// 内容过滤器
//#content中是否包含kaivon
$('#content:contains(kaivon)').css('color','blue');
//寻找div下面是否有空标签
$('div:empty').css({
width:'100px',
height:'100px',
background:'green'
});
//#has中是否包含p标签 只要包含就行
$('#has:has(p)').css('border','1px solid #000');
//#title的父级标签
$('#title:parent').css('border','1px solid #f00');
</script>
</body>
</html>
标签：jQuery,solid,标签,li,border,选择器,css 来源： https://www.cnblogs.com/yang2280539387/p/16414210.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。