目录
1.三种基本选择器
作用：选择页面上的某一个或者某一类元素
1.1 标签选择器
格式： 标签 { }
弊端：如果存在多个相同标签（如多个h1）,只能做到要变一起变，无法进行单独设置
目录结构：
html结构：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Java</h1>
<h1>biu</h1>
<p>数据结构</p>
</body>
</html>css样式：
/*标签选择器会选择到页面上所有这个标签的元素*/
h1{
color: blueviolet;
background: beige;
border-radius: 24px;
}
p{
font-size: 16px;
}
1.2 类选择器 class
选择所有class一致的标签，跨标签
格式： .类名{}
好处：可以对多个标签进行归类，实现了复用
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器格式： .class的名称{}
好处：可以多个标签归类,实现了复用
*/
.biu{
color: aquamarine;
}
.lwy{
color: blueviolet;
}
</style>
</head>
<body>
<h1 class="biu">aaa</h1>
<h1 class="lwy">bbb</h1>
<h1 class="biu">ccc</h1>
<p class="lwy">ddd</p>
</body>
</html>
1.3 id选择器
全局唯一
格式： #id名{}
不遵循就近原则，id选择器 > class选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器格式： #id名称{}
id必须保证全局唯一，不可被复用
不遵循就近原则 id选择器 > class选择器 > 标签选择器
*/
#biu{
color: deepskyblue;
}
.style1{
color: greenyellow;
}
h1{
color: bisque;
}
</style>
</head>
<body>
<h1 id="biu">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
</body>
</html>
2. 层次选择器
2.1 后代选择器
在某个元素的后面起作用
控制body后的所有p标签元素：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body p{
background: deepskyblue;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
2.2 子选择器
控制某一代元素（网站都是树形层次结构）
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子选择器*/
body>p{
background: beige;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
2.3 相邻兄弟选择器
同辈之间，对上不对下
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*兄弟选择器*/
.active+p{
background: deeppink;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
2.4 通用选择器
当前选中元素的向下所有兄弟元素
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
/*body p{*/
/* background: deepskyblue;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: beige;*/
/*}*/
/*兄弟选择器*/
/*.active+p{*/
/* background: deeppink;*/
/*}*/
/*通用选择器*/
.active~p{
background: lightblue;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
3.结构伪类选择器
伪类：过滤一些条件判断
nth-child(1):选中当前元素父级的第一个元素，且必须是当前元素才生效（即java中的一对一关系）
- 举例：p:nth-child(1) ：首先定位到p标签的父级元素，然后再选中该父级元素下的第一个元素（且必须为p标签）
nth-of-type(2)：选择父元素里面第二个指定类型的元素
- 举例：p:nth-of-type(2)：首先定位到p标签的父级元素，然后再选中该父级元素下第二个类型为p的元素
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用id和class选择器-->
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
background: lightblue;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
background: deeppink;
}
/*选中p1 -> 定位到父元素，选择当前的第一个元素
nth-child:选中当前元素父级的第一个元素
*/
p:nth-child(2){
background: beige;
}
/*nth-of-type(2)：选择父元素里面第二个指定类型的元素*/
p:nth-of-type(2){
background: lavender;
}
a:hover{
background: darkblue;
}
</style>
</head>
<body>
<a href="">123</a>
<h1>h1</h1>
<p >p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
4. 属性选择器
本质：id+class的结合
1）选中存在id属性的元素
格式：标签[属性]{样式}
页面效果：
编码实现：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: deepskyblue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/*选中存在id属性的元素 格式：标签[属性]{样式}*/
a[id]{
background: beige;
}
</style>
</head>
<body>
<p class="demo">
<a href="http:www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank " title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/1.png" class="links item">4</a>
<a href="images/1.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>2）选中存在id属性为first的元素
格式：标签[属性名=属性值]{样式}
在上述代码中做如下修改：
/*选中存在id属性为first的元素*/
a[id=first]{
background: deeppink;
}3）选中class中带有‘links’的元素
=：绝对等于
*=：相当于通配符，包含关系
/*选中class中带有‘links’的元素*/
a[class*="links"]{
background: chartreuse;
}4）选中href中以‘https’开头的元素 -> 正则表达式
以....开始：^=
/*选中href中以'https'开头的元素*/
a[href^=https]{
background: lavender;
}5）选中href以‘pdf’结尾的元素
以...结尾：$=
/*选中href以‘pdf’结尾的元素*/
a[href$=pdf]{
background: bisque;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
