如果要给一个html标签添加样式，使其变个更加美观。那么就要先选中它。否则鬼才知道你要给谁加样式呢。
就好比你要让Tom帮你拿杯水，那你先必须叫他的名字，在对他说：帮我拿杯水过来。否则，鬼知道你在让谁帮你拿杯水过来。
在开始之前，我们先创建一个index2.html文件，用来学习下面的效果使用：
内容如下：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
</head>
<body>
<p>段落</p>
<b>加粗</b>
<span>无</span>
</body>
</html>
css选择器分类：
css选择器分为三大类，每个大类下面又分若干小类，它们分别是：
一、基本选择器
1.通用选择器
*{
border:1px solid red;
}
“*” 号选择器是通用选择器，功能是匹配所有html元素的选择器，包括<html>和<body>标签。
使用通用选择器来添加样式：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
*{
border: 1px solid red;
}
</style>
</head>
<body>
<p>段落</p>
<b>加粗</b>
<span>无</span>
</body>
</html>
页面效果如下图：
上图中一共有五个红框，最外面的红框是<html>标签，第二个红框是<body>标签,第三个红框是<p>标签，第四个红框是<b>标签，第五个红框是<span>标签。通用选择器就是选中页面中的所有元素，大家可以多加几个元素测试一下。
2.元素选择器
p{
color:red;
}
直接使用标签名称作为选择器就称为元素选择器。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>段落</p>
<b>加粗</b>
<span>无</span>
</body>
</html>
页面效果如下图：
你也可以试一试把加粗两字变红或者变绿，发挥想象自己变一下吧。
3.ID选择器
在html篇，我们讲过元素的属性，id是元素的通用属性，每个标签都可以加上id属性。例如我们可以给p标签加上id="abc"
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
#abc{
color:red;
}
</style>
</head>
<body>
<p id="abc">段落</p>
<b>加粗</b>
<span>无</span>
</body>
</html>
id选择器以#开头，代表就是id，p标签的id="abc"，那在写css样式的时候，就要写成#abc。
页面效果如下图：
当然你也可以给b标签加一个id属性，然后用css的id选择器将b标签的文字变为蓝色。
这里要注意一点：在一个页面中id的名字不可以重复，我们p标签的id为abc，那么b标签的id就不能为abc了。
4.类选择器
和id一样，class也是一个元素的通用属性，我们可以给span加一个classs属性：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
.test{
color:red;
}
</style>
</head>
<body>
<p id="abc">段落</p>
<b class="test">加粗</b>
<span class="test">无</span>
</body>
</html>
类选择器以"."开头，例如：要把span标签里面的文字变成红色，css的选择器就应该写成 .test。class和id不同，class可以重名，我们这里span标签和b标签的class都是test。所以
.test{
color:red;
}
会同时作用span和b标签。
页面效果如下图：
span和b标签里面的文字都变红了。
5.属性选择器
每个标签都有四个通用属性，分别是：id、class、name、title，还有专用属性，比如href这个属性就专属于a标签。属性选择器就是根据元素的属性来进行选择，就拿a标签来举例：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
[href]{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
页面效果如下：
属性选择器还以进一步过滤，比如我们有好多的a标签：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://xy2.163.com">网易</a>
<a href="https://www.php.net">php</a>
</html>
我们要选择以http开头的，那么就可以写成：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
[href^="http"]{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://xy2.163.com">网易</a>
<a href="https://www.php.net">php</a>
</html>
[href^="http"]意思就选择href属性以http开头的html标签。有开头就有结尾，比如我们选择以net结尾的标签：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
[href$=".net"]{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://xy2.163.com">网易</a>
<a href="https://www.php.net">php</a>
</html>
有开头有结尾，那有没有中间呢？有，*可匹配属性值包含指定字符的标签，比如我们要选择百度：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
[href*="baidu"]{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://xy2.163.com">网易</a>
<a href="https://www.php.net">php</a>
</html>
上面效果图我就不展示了，大家可以自测试一下效果。
二、复合选择器
1.分组选择器
将多个选择器通过逗号分隔，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用ID选择器、类选择器、属性选择器混合使用。
比如我们可以同时选中p、b、span标签将它们的文字变为红色：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p,b,span{
color: red;
}
</style>
</head>
<body>
<p id="abc">段落</p>
<b class="test">加粗</b>
<span class="test">无</span>
</body>
</html>
也可以：
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
#abc,.test{
color: red;
}
</style>
</head>
<body>
<p id="abc">段落</p>
<b class="test">加粗</b>
<span class="test">无</span>
</body>
</html>
2.后代选择器
选择p元素内部的所有b元素，不在乎b的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p b{
color: red;
}
</style>
</head>
<body>
<p>
<b>1</b>
<b>2</b>
<b>3</b>
<b>
202
<b>4</b>
</b>
<b>
203
<b>
204
<b>5</b>
</b>
</b>
</p>
</body>
</html>
页面效果如下图：
3.子选择器
子选择器类似于后代选择器，而最大的区别就是子选择器只能选择父元素下一级的元素，不可以再往下选择。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
ul > li{
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li>
我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
</body>
</html>
页面效果图如下：
4.相邻兄弟选择器
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p+b{
border:1px solid red;
}
</style>
</head>
<body>
<p>第一个</p>
<b>第二个</b>
<b>第三个</b>
<b>第四个</b>
</body>
</html>
页面效果图如下：
5.普通兄弟选择器
普通兄弟选择器匹配和第一个元素后面的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p ~ b{
border:1px solid red;
}
</style>
</head>
<body>
<p>第一个</p>
<b>第二个</b>
<b>第三个</b>
<b>第四个</b>
</body>
</html>
页面效果图如下：
三、伪元素选择器
1.::first-line 块级首行
块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置P::first-line。什么是块级元素我们在html篇中讲过，块级元素就是独占一行的元素。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
::first-line{
color:red;
}
</style>
</head>
<body>
<p>这里是测试<br>这里是第二行</p>
<div>这里是测试<br>这里是第二行</div>
</body>
</html>
页面效果如下图：
如果只想改变p标签首行的样式，那么在前面加上限定p::first-line
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p::first-line{
color:red;
}
</style>
</head>
<body>
<p>这里是测试<br>这里是第二行</p>
<div>这里是测试<br>这里是第二行</div>
</body>
</html>
2.::块级首字母
块级元素的首行字母，上面的是首行，现在这个是首行的字母。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
p::first-letter{
color:red;
}
</style>
</head>
<body>
<p>这里是测试<br>这里是第二行</p>
<div>这里是测试<br>这里是第二行</div>
</body>
</html>
页面效果如下图：
3.::before 文本前插入
在文本前面插入内容。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style>
a::before{
content:'点击-';
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
页面效果如下图：
4.::文本后插入
文本后和文本前效果差不多，大家自行测试看效果。
今天的内容就这么多，一定记得多加练习。光看不练是永远都学不会的。
如果喜欢我的内容记得关注我，我的宗旨是用最通俗易懂的语言，让所有人都学会电脑编程。大家一起加油！
发表评论 取消回复