CSS-常用选择器
2018-08-08 本文已影响0人
3e0a50393df8
常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>常用选择器</title>
<style type="text/css">
#p1{
font-size: 20px;
}
.p2{
color: red;
}
.p3{
background-color: yello;
}
/* 并集选择器
#p1,.p2,.p3
*/
/* 交集选择器
span.p3
*/
</style>
</head>
<body>
<h1>好词好句</h1>
<p> 1、早上推开房门，只见地上的积雪已经一尺多厚了。</p>
<p id="p1">2、大公鸭在岸上走时摇摇摆摆，仿佛刚学走路的娃娃。 </p>
<p>3、我们一边唱歌一边跳舞。我一边扫地一边与同学说话。 </p>
<p class="p2">4、湖水中间有一座红石桥，在阳光的照耀下显的格外光亮。 </p>
<p class="p2 p1">5、刺玫瑰纵使刺伤了我的手指，始终还是凋谢不了我的恋情。 </p>
<span class="p3">6、听了这么美妙的音乐，他竟控制不住自己的感情地跳起舞来。</span>
</body>
</html>
子代和父代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>子元素和父代元素选择器</title>
<style type="text/css">
/* 后代元素选择器
*/
div p span{
color: green
}
</style>>
</head>
<body>
<div>
<span> 我是div标签中的span</span>
<p><span> 我是p标签中的span</span></p>
</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>伪类选择器</title>
<style type="text/css"></style>
a:line{
color:green
}
a:hover{
color:red
}
</head>
<body>
<a href="http://www.baidu.com"></a>
<input:
</body>
</html>
伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>伪类元素</title>
<style type="text/css">
/* p:first-letter{
color: red;
font-size:20px;
} */
/* p:first-line{
background-color: yellow;
} */
p:before{
content:"段落前";
color:green;
}
</style>
</head>
<body>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>属性选择器</title>
<style type="text/css">
/* p[title]{
color:red } */
/* p[title^="he"]{
color: red
} */
/* p[title$="a"]{
color: red
} */
p[title*="h"]{
color: red
}
</style>
</head>
<body>
<p title="hello">sdkjfghskdh</p>
<p>sdkjfghskdh</p>
<p title="hahaha">sdkjfghskdh</p>
</body>
</html>
孩子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>孩子选择器</title>
<style type="text/css">
/* p:first-child{
background-color: yellow;
} */
/* p:last-child{
background-color: red
} */
p:nth-child(odd){
background-color: red
}
</style>
</head>
<body>
<!-- <span>hallo</span> -->
<p>pppppppppppp</p>
<p>pppppppppppp</p>
<p>pppppppppppp</p>
<p>pppppppppppp</p>
<p>pppppppppppp</p>
<p>pppppppppppp</p>
</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>兄弟元素选择器</title>
<style type="text/css">
/* span + p{
background-color: red
} */span ~ p{
background-color: yellow
}
</style>
</head>
<body>
<p>hahahahahhahahahahah</p>
<p>hahahahahhahahahahah</p>
<span>lalala</span>
<p>hahahahahhahahahahah</p>
<p>hahahahahhahahahahah</p>
<p>hahahahahhahahahahah</p>
<p>hahahahahhahahahahah</p>
<p>hahahahahhahahahahah</p>
</body>
</html>
否定伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>否定伪类</title>
<style type="text/css">
p:not(p1){
background-color: yellow;
}
</style>
}
</head>
<body>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
<p>bbbbbbbbbbbb</p>
</body>
</html>
优先选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器优先级</title>
<style type="text/css">
/*
内联优先级 1000
id选择器 100
类和伪类 10
元素选择器 1
通配* 0
*/
.p1{
color: yellow
}
.p3{
color: green
}
p{
}
</style>
</head>
<body>
<div></div>
<p class="p1 p3" id="p2" style="background-color: skyblue">
段落
<span>p中的span</span>>
</p>
</body>
</html>
a的伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>a的伪类</title>
<style type="text/css">
a:link{
color: yellowgreen
}
a:visited{
color: red}
a:hover{
color: orange
}
a:active{
color: skyblue
}
</style>
</head>
<body>
<a href="www.baidu.com">
百度
</a>
<br>
<a href="www.baidu.com">
百度2
</a>
</body>
</html>
