CSS选择器
HTML：定义网页元素
CSS：美化网页元素，控制HTML标签展示样式
CSS与HTML相结合，结合方式如下：
（1）内联样式：CSS代码复用性太低，书写凌乱，不推荐，缺点就是一次只能控制一个标签端的展示样式
（2）内部样式：配合选择器，进行标签的选择，进而对标签进行样式的控制。一次可以控制一个或多个标签的展示样式，复用性高一些。
（3）外部样式：将CSS代码抽取到一个单独的文件中，页面用来引即可，一次可以控制多个页面元素的展示样式，开发首选。
id选择器
id选择器一次只能选择一个标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
*选择器：就是选中一个或多个标签的一种语法
*id选择器 一次只能选中一个标签
*/
#myh1 {
color: #0000FF;
font-size: 50px;
}
#myh2 {
color: #FF00FF;
font-size: 100px;
}
</style>
</head>
<body>
<!-- id是唯一的 多个标签的id值不要相同 -->
<h1 id="myh1">id选择器</h1>
<h2 id="myh2">id选择器222222</h2>
</body>
</html>
包含选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 h1 span{
color: #C71585;
font-size: 20px;
}
#d2 h2 span{
color: #FF0000;
font-size: 20px;
}
h1{
color: cyan;
font-size: 15px;
}
</style>
</head>
<body>
<!-- span是行标签 p是块标签 -->
<div id="d1">
<h1>
<span>陕西省</span>
</h1>
</div>
<div id="d2">
<h2>
<span>西安市</span>
</h2>
</div>
<h1>长安区</h1>
<h1>子午大道</h1>
<h1>西安邮电大学</h1>
</body>
</html>
标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 标签名选择器 一次可以选中多个标签 -->
<style type="text/css">
h1{
color: aquamarine;
}
font{
font-size: 20px;
}
</style>
</head>
<body>
<h1>标签名选择器1</h1>
<h1>标签名选择器1</h1>
<h1>标签名选择器1</h1>
<h1>标签名选择器1</h1>
<h1>标签名选择器1</h1>
<h1>标签名选择器1</h1>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 类选择器 一次可以选取多个标签进行控制 -->
<style type="text/css">
/* 类选择器 一次可以选取多个标签进行控制 */
.myclass1 {
color: #FF00FF;
font-size: 20px;
}
#h1 {
color: #0000FF;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="myclass1">类选择器1</h1>
<h1 class="myclass1">类选择器1</h1>
<h1 class="myclass1">类选择器1</h1>
<h1 class="myclass1">类选择器1</h1>
<h1 class="myclass1">类选择器1</h1>
<h1 id="h1" class="myclass1">类选择器2</h1>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* h1[align]{
color: red;
} */
h1[align='center'] {
color: red;
}
/* first-letter每个元素的第一个字母 */
div::first-letter {
color: #0000FF;
font-size: 50px;
}
</style>
</head>
<body>
<h1 align="center">陕西省</h1>
<h2 align="right">西安市</h2>
<h1>长安区</h1>
<div id="">
西安邮电大学长安校区西区
</div>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 全局通配 */
/* {
color: #0000FF
} */
/* 局部通配 */
#d1>* {
color: red;
}
</style>
</head>
<body>
<div id="">
陕西省西安市
</div>
<font size="" color="">
长安区 雁塔区
</font>
<div id="d1">
陕西省西安市长安区
<font size="" color="">
西安邮电大学
</font>
<h1>西安邮电大学</h1>
</div>
<h1>旭日苑餐厅</h1>
</body>
</html>
伪类选择器
伪类选择器最初是针对a标签的，伪类选择器就是选择状态的。
link：连接平常的状态。 active：连接被按下的状态。
visited：连接被访问过之后的状态。 hover：鼠标放到连接上的状态。
超链接标签有四种状态：
（1）链接状态。（2）鼠标悬浮状态。（3）鼠标按下状态。（4）链接访问过后的状态。
其中，鼠标悬浮状态 鼠标按下状态 这两种状态对于其他标签也是有用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
color: mediumvioletred;
/* 线条的样式 none 不要线条 underlinex下划线 line-through 删除线 overline 上划线*/
text-decoration: none;
}
a:hover {
color: black;
font-size: 50px;
text-decoration: none;
}
a:active {
color: red;
font-size: 220px;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">进入百度</a>、
<a href="http://www.baidu.com">进入百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 500px;
width: 500px;
background: #0000FF;
}
div:hover {
height: 500px;
width: 500px;
background: #FF0000;
}
div:active {
background: yellow;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
相邻选择器
相邻兄弟选择器：#d1:hover+div 兄弟选择器：#d1:hover~div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background: red;
}
#d2{
height: 200px;
width: 200px;
background: yellow;
}
/*+ 相邻兄弟选择器 */
/* #d1:hover+div{
background: olivedrab;
} */
/* ~兄弟选择器 */
#d1:hover~div{
background: palevioletred;
}
#d3{
height: 200px;
width: 200px;
background: blue;
}
</style>
</head>
<body>
<div id="d1">
陕西省陕西省
</div>
<div id="d2">
西安市西安市
</div>
<div id="d3">
雁塔区雁塔区
</div>
</body>
</html>
选择器的优先级
多个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效。
如果说控制的样式之间有冲突时，根据选择器的优先级来，优先级高的选择器它的控制强度就比较大。
内联样式>id选择器>类选择器>标签名选择器
优先级的关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
*多个选择器，选中了同一标签，控制的样式如果没有冲突，那就叠加生效
如果说有冲突时：根据选择器的优先级来的，优先级高的选择器它的控制强度比较大
内联样式>id选择器>类选择器>标签名选择器
优先级关系：内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器
*/
#d1 {
height: 200px;
width: 500px;
}
.divclass {
width: 200px;
background: #0000FF;
}
div {
background: red;
}
</style>
</head>
<body>
<div id="d1" class="divclass" style="background: #7FFF00;height: 500px;">
</div>
</body>
</html>
子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul>li{
color: red;
}
#d1{
color: greenyellow;
}
#sp{
color: #FF0000;
}
#d2>div>#sp1{
color: blue;
}
</style>
</head>
<body>
<div id="d1">
<!-- 子标签没有单独去设置样式，会继承父标签的样式 -->
<span id="sp">陕西省</span>
</div>
<div id="d2">
<div id="">
西安市
</div>
<div id="">
<span>
雁塔区，雁塔区
</span>
</div>
<div id="">
长安区，长安区
</div>
<div id="">
西安邮电大学
<span id="sp1">
西安邮电大学长安校区
</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
height: 500px;
width: 500px;
background: #ADFF2F;
}
#nei {
height: 250px;
width: 250px;
background: #C71585;
}
#wai:hover>#nei {
background: aqua;
}
#wai1 {
height: 600px;
width: 600px;
background: red;
}
#nei1 {
height: 400px;
width: 400px;
background: #0000FF;
}
#nei2 {
height: 200px;
width: 200px;
background: #555500;
}
#nei1:hover>#nei2 {
background: #00FFFF;
}
#wai1>#nei1>#nei2 {
background: #ffffff;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
<div id="wai1">
<div id="nei1">
<div id="nei2">
</div>
</div>
</div>
</body>
</html>
8427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
