1.通用、标签、id、类选择器
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*通用选择器--*/
*{
color: red;
}
/*标签选择器*/
div{
color: yellow;
}
p{
color: purple;
}
span{
color: green;
}
/*类选择器*/
.test{
color: brown;
background-color: darkgray ;
}
.test2{
border: 1px solid #000;
}
/*id选择器*/
#big{
font-size: 100px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="big">我是div1</div>
<div class="test2">我是div2</div>
<div class="test">我是div3</div>
<p>我是段落1</p>
<p class="test2">我是段落2</p>
<p class="test test2">我是段落3</p>
<span>我是span1</span>
<span class="test2">我是span2</span>
<span class="test">我是span3</span>
</body>
</html>
2.复合、群组选择器
效果图
代码
<style>
/*复合选择器*/
p.test1{
color: red;
}
div#main{
color: green;
}
/*群组选择器*/
div,span,.test1{
border-bottom: 2px solid purple;
}
</style>
<body>
<div id="main">我是div1</div>
<div>我是div2</div>
<div class="test1">我是div3</div>
<p>我是段落1</p>
<p class="test1">我是段落2</p>
<p>我是段落3</p>
<span class="test1">我是span1</span>
<span>我是span2</span>
<span >我是span3</span>
</body>
3.后代选择器
效果图
代码
<style>
/*后代选择器*/
/* #main p{
color: red;
}*/
/*直接后代选择器*/
#main > p{
color: purple;
font-size: 50px;
}
</style>
<body>
<div id="main">
<p>div中在p标签</p>
<span>
<p>span中在p标签</p></span>
</div>
<p>外面在p标签</p>
</body>
4.兄弟元素
<style>
div{
background-color: green;
}
/*查找后面的一个兄弟元素：兄弟元素+兄弟元素{}*/
div + p{
color: red;
}
/*查找豁免所有的兄弟元素：兄弟元素~兄弟元素{}*/
div ~ p{
background-color: yellow;
color: purple;
}
</style>
<body>
<div id="main">
<p>div中在p标签</p>
<span>
<p>span中在p标签</p></span>
</div>
<p>与div相邻的p标签</p>
<p>与p相邻的p标签</p>
<p>与p相邻的p标签</p>
<p>与p相邻的p标签</p>
<p>与p相邻的p标签</p>
</body>
5伪类和伪元素
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类和伪元素</title>
</head>
<style>
p{
width: 300px;
background-color: red;
}
/*伪元素*/
p::first-letter{
font-size: 30px;
color: green;
}
p::first-line{
color: yellow;
}
/*伪类*/
p.test1:hover{
width: 600px;
background-color: deepskyblue;
}
input:focus{
width: 500px;
height: 50px;
}
</style>
<body>
<p class="test1">我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<p>我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>
<input type="text">
</body>
</html>
6.not 选择器
<style>
<!--/*:not(选择器){}*/-->
div:not(.box){
color: red;
}
</style>
<body>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div class="box">gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
<div>gjsdpjgferofjldsmcdsjfdsuhfhd</div>
</body>
6.选择器优先级
<style>
/*1.针对性越强，优先级越高
2.权值
*：0
标签：1
类：10
伪类/伪元素：10
id:100
important:1000
3.原则：选择器的权值加到一起，大的优先；若权值相同，后定义的优先
4，important>内联>id>类，伪类，伪元素，属性>*>继承
*/
p{
color: red;
}
.test1{
color: purple;
}
</style>
</head>
<body>
<p class="test1">喜欢IT，就上聊客</p>
</body>
