CSS选择器种类: 基本选择器 层次选择器 伪类选择器 选择器的优先级
一、基本选择器：
1️⃣：通配符选择器。(选择页面所有的元素)
*{
margin: 0;
padding: 0;
}
2️⃣： 标签（元素）选择器:查找的是页面中所有 该种类型的 标签。
p {
color:yellow;
font-size: 40px;
background-color: pink;
}
3️⃣：类（class）选择器。
.oneDiv {
font-size: 50px;
}
.selfH1{text-indent: 2em;
}
4️⃣：id 选择器。
#twoDiv {
background-color:lightpink ;line-height: 50px;
}
5️⃣： 群组选择器。
p.oneDiv,#twoDiv,div{
text-indent: 2em;
}
附件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基本选择器</title>
<style type="text/css">
/*1,通配符选择器(选择页面所有的元素)*/
*{
margin: 0;
padding: 0;
}
/**
* 2，标签（元素）选择器:查找的是页面中所有 该种类型的 标签
*/
p {
color:yellow;
font-size: 40px;
background-color: pink;
}
/**
* 3，类（class）选择器
*/
.oneDiv {
font-size: 50px;
}
.selfH1{
text-indent: 2em;
}
/*
* 4, id 选择器*/
#twoDiv {
background-color:lightpink ;
line-height: 50px;
}
/*
* 5,群组选择器
* */
p.oneDiv,#twoDiv,div{
text-indent: 2em;
}
</style>
</head>
<body>
<p>早上吃饭没？</p>
<div class="oneDiv">
说一个，咱们走一个.....
</div>
<p>没有实力的愤怒毫无意义！</p>
<!--元素(标签)可以拥有多个Class值（不限次数），多个 class 值之间用空格隔开-->
<h1 class="oneDiv selfH1">大标题</h1>
<div>只是个简单的div</div>
<div id="twoDiv">
王侯将相宁有种乎.....
</div>
</body>
</html>二、层次选择器：
1️⃣：后代选择器。
.oneDiv p{
font-size: 80px;
color: red;
}
2️⃣：父子选择器。(在儿子之后找)
.oneDiv>.p{
background-color: pink;
}
3️⃣： 相邻兄弟选择器。(只往下边找)
.oneDiv+p{
background-color: gold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02层次选择器</title>
<style type="text/css">
/*
1,后代选择器*/
.oneDiv p{
font-size: 80px;
color: red;
}
/*
2,父子选择器(在儿子之后找)*/
.oneDiv>.p{
background-color: pink;
}
/*
3.相邻兄弟选择器(只往下边找)*/
.oneDiv+p{
background-color: gold;
}
</style>
</head>
<body>
<div class="oneDiv">
<p class="p">我是第一个 p</p>
<p>我是第二个 p</p>
<div>
<p>第三个 p</p>
</div>
</div>
<p>外边的第一个 p</p>
<p>外边的第二个 p</p>
</body>
</html>三、伪类选择器：是系统为我们创建好的类 用来为标签的某个时机 设置对应的样式
link ,visited,hover,active四个伪类选择器(四个状态)
如果这个 4个伪类同时写的话,要注意先爱(love)后恨原则:
1️⃣：link 元素没有被访问时的状态
2️⃣：visited 元素点击之后的状态
3️⃣：hover 光标移动到元素时的状态
4️⃣：active 鼠标按下 没有 抬起时的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03伪类选择器</title>
<style type="text/css">
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: deeppink;
}
a:active{
color: green;
}
</style>
</head>
<body>
<!--
伪类选择器:是系统为我们创建好的类.用来为标签的某个时机 设置对应的样式
link ,visited,hover,active四个伪类选择器(四个状态)
如果这个 4个伪类同时写的话,要注意先爱(love)后恨原则:
1,link 元素没有被访问时的状态
2,visited 元素点击之后的状态
3,hover 光标移动到元素时的状态
4,active 鼠标按下 没有 抬起时的状态
-->
<a href="http://www.baidu.com">百度一下,你就知道</a>
</body>
</html>
四、选择器优先级：
选择的优先级
注意: 只有对相同元素设置相同样式时,我们才去讨论选择器的优先级问题
优先级顺序(从强到弱顺序):
1️⃣： !important
2️⃣： 行间样式(内联样式)
3️⃣： id选择器
4️⃣： class选择器,伪类选择器,属性选择器
5️⃣： 元素选择器,伪元素选择器
6️⃣： *(通配符)选择器
7️⃣： 元素的默认样式
当元素优先级相同时,后来居上(后面的代码覆盖前面的代码)
对于层次选择器:这里有个值可以帮助我们迅速判定那个层次选择器的有限极高
!important 100000
行间样式 10000
id选择器 1000
class选择器 100
标签选择器 10
对于群组选择器,各个单一选择器单独判定,互不影响
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04选择器的优先级</title>
</head>
<body>
<!--
选择的优先级
注意: 只有对相同元素设置相同样式时,我们才去讨论选择器的优先级问题
优先级顺序(从强到弱顺序):
1,!important
2,行间样式(内联样式)
3,id选择器
4,class选择器,伪类选择器,属性选择器
5,元素选择器,伪元素选择器
6,*(通配符)选择器
7,元素的默认样式
当元素优先级相同时,后来居上(后面的代码覆盖前面的代码)
对于层次选择器:这里有个值可以帮助我们迅速判定那个层次选择器的有限极高
!important 100000
行间样式 10000
id选择器 1000
class选择器 100
标签选择器 10
对于群组选择器,各个单一选择器单独判定,互不影响
-->
<div class="oneDiv" id="selfDiv">
随便吧
</div>
</body>