选择器
1.基本选择器
标签选择器：格式：标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #11ff00;
background: red;
border-radius:30px;
}
p{
font-size:80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>
类选择器：格式：.标签名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式： .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.jiaxing{
color: #8400ff;
}
.nb{
color: green;
}
</style>
</head>
<body>
<h1 class="jiaxing">标题1</h1>
<h1 class="nb">标题2</h1>
<h1 class="jiaxing">标题3</h1>
<p class="jiaxing">P标签</p>
</body>
</html>
id选择器：格式：#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器格式： id选择器，必须保证全局唯一！
#id名称{}
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
#jiaxing{
color: #f6556f;
}
.sty{
color: #11ff00;
}
h1{
color: #8400ff;
}
</style>
</head>
<body>
<h1 id="jiaxing">标题1</h1>
<h1 class="sty">标题2</h1>
<h1 class="sty">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
优先级：id > 类 > 标签
2. 1层次选择器
后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background: red;
}
子选择器：一代
/*子选择器*/
body>p{
background: #8400ff;
}
相邻兄弟选择器：同辈
/*相邻兄弟选择器：只有一个，相邻（向下） */
.active + p{
background: #f6556f;
}
通用选择器
/*通用选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background:green;
}
2.2 结构伪类选择器
伪类： 条件
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #8400ff;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #f6556f;
}
/*选中p1 : 定位到父元素，选择当前的第一个元素
选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(1){
background: pink;
}
/*选中父元素下的p元素类型的第二个元素*/
p:nth-of-type(2){
background: yellow;
}
</style>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
2.3 属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius: 30px;
background: #023dff;
text-align: center;
text-decoration: none;
color:gainsboro;
margin-right: 5px;
/*line-height: 50px;*/
font:bold 20px/50px Arial;
}
/*属性名[属性名 = 属性值（可以用正则）] */
/* ^= 以这个开头*/
/* $= 以这个结尾*/
/* 属性选择器格式： a[]{}*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*id = first 的元素*/
/*a[id = first]{*/
/* background: yellow;*/
/*}*/
/*class 中有 links 的元素*/
/* = 是绝对等于*/
/* *= 是包含等于*/
/*a[class *= "links"]{*/
/* background: #f6556f;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href*=http]{*/
/* background: yellow;*/
/*}*/
a[href$=jpg]{
background: yellow;
}
</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/123.png" class="links item">4</a>
<a href="images/123.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>
=标签：color,标签,元素,id,background,相关,选择器,CSS From： https://www.cnblogs.com/jiaxing-java/p/17053618.html
*=
^=
$=