1.什么是选择器?
每一条css样式声明由两部分组成,如下:
选择器{
样式;
}
在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象,也就是说该”样式“作用与网页中的哪些元素。
2.基础选择器
2.1标签选择器
标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。
比如我想把我写的文字的字体和颜色做一下改变,就需要这么做:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
font-size: 14px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
</body>
</html>
2.2ID选择器
ID好比是每个人的身份证号一样,每个人都有身份证,并且身份证号是不一样的。在网页中所有的标签都可以设置id,并且id不能重复。
语法:
#ID选择器名称{
css样式代码;
}
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!</a>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
2.3类选择器
类选择器跟id有点相似,任何的标签元素都可以添加类(class),但是不同的是类是可以重复,有“归类”的概念,并且同一个标签中可以携带多个类,用空格隔开。
语法:
.类选择器名称{css样式代码;}
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!<br></a>
<a class="bold samll">字体加粗,14px<br></a>
<a class="bold big">字体加粗,20px<br></a>
<a class="lighten small">字体变细,14px<br></a>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
3.高级选择器
3.1后代选择器
顾名思义,所谓后代,就是父亲的所有后代(包括儿子、孙子、重孙子等)。
语法:
div p{
css代码样式;
}
使用空格表示后代选择器,上面表示 div是父元素,而p是div的后代元素。
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!<br></a>
<a class="bold samll">字体加粗,14px<br></a>
<a class="bold big">字体加粗,20px<br></a>
<a class="lighten small">字体变细,14px<br></a>
<div>
<p>厉害哦!!<br></p>
<p>还需要继续努力啊。。</p>
</div>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div p{
color: purple;
font-size: 15px;
}
3.2子代选择器
子代,仅仅表示父亲的亲儿子,只有亲儿子。使用>表示子代选择器。
语法:
div>p{css代码样式;}
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!<br></a>
<a class="bold samll">字体加粗,14px<br></a>
<a class="bold big">字体加粗,20px<br></a>
<a class="lighten small">字体变细,14px<br></a>
<div>
<p>厉害哦!!<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份,不属于子代!!</p>
</a>
</div>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
3.3通用选择器
通用选择器是功能最强大的选择器,它使用一个*号来表示,它的作用是匹配html中所有标签元素。使用它,我们可以对网页进行重置样式,以按照产品需求来开发对应的网页。
对页面中所有的文本设置为红色。
*{color:red;}
3.4组合选择器
当你想在html中为多个标签元素设置同一个样式时,我们可能会想到添加相同的类,但是如果网页中的这样的标签非常多呢?是不是添加相同的类名,又成了我们累加的工作。不易于效率开发。那么我们可以使用组合选择器来选择,语法如下:
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!<br></a>
<a class="bold samll">字体加粗,14px<br></a>
<a class="bold big">字体加粗,20px<br></a>
<a class="lighten small">字体变细,14px<br></a>
<div>
<p>厉害哦!!<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份,不属于子代!!</p>
</a>
</div>
<h2>字体加粗,20px</h2>
<h1>字体加粗,20px</h1>
<h3>字体加粗,20px</h3>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
3.5伪类选择器
更有趣的是伪类选择器,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。
例子:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程,编程爱我,编程使我快乐!!</a>
<a id="a1">我爱英语,英语爱我,英语使我快乐!!<br></a>
<a class="bold samll">字体加粗,14px<br></a>
<a class="bold big">字体加粗,20px<br></a>
<a class="lighten small">字体变细,14px<br></a>
<div>
<p>厉害哦!!<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份,不属于子代!!</p>
</a>
</div>
<h2>字体加粗,20px</h2>
<h1>字体加粗,20px</h1>
<h3>字体加粗,20px</h3>
<a href="#">百度一下!</a>
</body>
</html>
css:
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: purple;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}