css选择器（css类别选择器）

100人浏览 2024-11-28 11:18:53

如果要给一个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>