前端零基础入门（十）：css选择器二

最新推荐文章于 2022-02-17 13:57:01 发布

/*----无忧----*/

最新推荐文章于 2022-02-17 13:57:01 发布

阅读量290

点赞数 1

分类专栏：前端零基础入门文章标签： css选择器 css伪类毗邻元素选择器属性选择器

本文链接：https://blog.csdn.net/q213546879/article/details/84302143

版权

前端零基础入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

接上回，在之前 “前端零基础入门（九）：css选择器一” 里面我给大家介绍了css最基础的几个选择器：

ID选择器
类选择器
标签选择器
包含选择器
群组选择器

这几个都是我们开发过程中会经常用到的选择器，比如css reset一般会用到群组选择器，正常的布局都用类选择器以及标签选择器，当然中间会出现包含关系。然后某些特殊情况会用到群组选择器，至于ID选择器的话用得比较少一点，我们来看一段正常的css代码：

.menu {
  width: 100vw;
  height: 3.33333333rem;
  background: #d8f3ef;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: 0.5s;
}
.menu.active {
  height: 11.33333333rem;
  background: rgba(216, 243, 239, 0.79);
}
.menu .nav {
  width: 100%;
  height: 2.66666667rem;
  align-self: flex-start;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.66666667rem;
}
.menu .nav input {
  display: none;
}
.menu .nav span {
  display: inline-block;
  width: 2.66666667rem;
  color: #39363d;
  line-height: 2.66666667rem;
}

在这里面用得最多的就是类选择器了，然后还有标签选择器，当然它们之间存在包含关系。大家看完之后应该要能理解 “.menu .nav{}”这个选择器的意思，它代表着在menu这个类的子级里面去查找所有的nav类。不过 “.menu.active{}” 这个选择器大家可能会有点疑惑，包含选择器中间都是有空格的，这中间没有空格什么意思？这其实也是包含选择器的一种，不过它的意思是找到一个同时具有menu类名和active类名的这么个元素：<div class="menu active"></div> 像这样的代码估计大家也比较常见，所以就不再多说了。

今天我们要讲的是后面几种选择器：

属性选择器
伪类选择器
毗邻元素选择器

先来看第一个，属性选择器

属性选择器

其实属性选择器和类选择器的用法差不多，class是元素身上的一个属性，而元素具有很多属性，比如ID也是一个属性，其他的还有title、name等通用属性。甚至还可以自定义属性，在HTML5中明确定义标签可以有自定义属性，并且对其格式做出了限制：那就是任何自定义属性名称前面都必须加上data-前缀，也就是说如果我想要给一个元素加一个index自定义属性，那么我应该写成这样：

<div class="box" data-index="2"></div>

这时候在这个div身上就具有了一个自定义属性，这一块也是一个可以拓展的话题，我们后面再说，今天先说选择器。那么属性选择器，顾名思义其实就是通过属性来去选择一个元素，它的写法是这样的：“[attr]” 或者 “[attr='value']”，我们可以仅通过属性名称去选择一个元素，也可以通过属性名称以及属性值来选择一个元素，大家视情况而定就好了，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class]{
            color: #0c5460;
        }
    </style>
</head>
<body>

<div class="box">CSDN---webpilot</div>

</body>
</html>

得到的效果是这样的：

直接利用class属性，也可以选择这个元素，当然也可以用其他属性，大家不用限定在原有的属性里面。

伪类？

在css的定义中，伪类是用来添加一些选择器的特殊效果。

在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。比如当我们把鼠标移动到一个元素身上的时候，这个元素会获得一个 “:hover” 的伪类。而同样，当鼠标移开的时候这个元素讲失去这个伪类，所以我们就可以利用这个伪类来为这个元素添加一个特殊的效果。最简单的就是鼠标移动到文字上然后文字变颜色之类的了。

还有一些伪类如":first-child"能通过文档树推断出来。这些伪类在css3中有了一个新的名字，叫伪元素，不过在css2中统一叫做伪类。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

最基础的伪类有：

:hover 当元素被鼠标悬停的时候
:active 当元素被激活时（鼠标在这个元素身上按下）
:link 当一个超链接没有被访问的时候
:visited 当一个超链接被访问过后
:chedked 当一个选择类型的表单控件被选中时...

在这里就不一一列举了，网上一搜一大堆。而它的作用也很简单。就是可以为我们的页面加上一些小特效，这里我写了一些小案例，大家有兴趣的话可以去看看http://lexseven.github.io/example/blog/cssSelect/hover.html

那么伪类选择器的写法也很简单，当然，它的主要目的是给某个选择器加上特殊的效果，所以前面肯定要有一个其他的选择器，任何选择器都可以如“.menu:hover{}”。主要来说就是在其他选择器后面跟上一个冒号，然后写上伪类的名称，这就是伪类选择器的写法了。比如上图中鼠标悬停变色的代码我们可以来看看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            color: #999;
        }
        .box:hover{
            color: #e15671;
        }
    </style>
</head>
<body>

<div class="box">CSDN---webpilot</div>

</body>
</html>

伪类选择器的妙用有很多，不过在这里就不再一一赘述了，后面我会写专门的文章来介绍它，接着往下来看。

毗邻元素选择器

最后，毗邻元素选择器。通过前面介绍的这么多选择器，如果稍微用了一段时间之后应该不难发现，之前的选择器只能选择一个或者一些元素，或者通过某一个元素选择这个元素的后代元素。比如 "div p" 这就能选择所有div中的P标签，而毗邻元素选择器则可以让我们变得更加强大，它可以选择一个元素后面的所有兄弟元素。比如有这样一个结构：

<div class="box">
    <span></span>
    <span></span>
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
</div>

要求是选择所有.active之后的span元素，如果用之前的选择器我们是没有办法做到的，而毗邻元素选择器则很简单：

.active~span{
    color: #f1b0b7;
}

在这里要注意，".active" 和 "span" 之间是用“~”连接起来的，这个符号是按Shift 加数字 1前面那个键按出来的，其实它就是毗邻元素选择器本身了。得到结果：

好了，选择器这一块就先给大家介绍到这里，最后总结一下：

#select ID选择器
.select 类选择器
tagName 标签选择器
:select 伪类选择器
selectA~selectB 毗邻元素选择器
[attr] / [attr='value'] 属性选择器
selectA selectB 包含选择器
selectA,selectB 群组选择器

/*----无忧----*/

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端零基础入门（十）：css选择器二

接上回，在之前 “前端零基础入门（九）：css选择器一” 里面我给大家介绍了css最基础的几个选择器：ID选择器类选择器标签选择器包含选择器群组选择器这几个都是我们开发过程中会经常用到的选择器，比如css reset一般会用到群组选择器，正常的布局都用类选择器以及标签选择器，当然中间会出现包含关系。然后某些特殊情况会用到群组选择器，至于ID选择器的话用得比较少一点，我们来看...
复制链接

扫一扫

专栏目录