css基本选择器使用教程(一文快速读懂CSS属性选择器)(1)

常用CSS选择器说明及实例分析

CSS选择器(Selector)是用于实现网页页面定义的基础,选择器的主要作用在于确定指定的单个元素或者一类元素。在获取元素之后即可以对所获取的元素进行样式的定义。最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用属性选择器进行说明与实例展示。


CSS Selector类型划分

按照W3C技术规范划分目前CSS Selector主要类型可以划分为基本选择器、关系选择器、伪选择器三种类型不同的选择器。目前主要CSS选择器类型及分类描述如下图所示:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(2)

CSS Selector分类图

CSS Selector选择器主要分类描述如上图,其中我们较为常用的选择器主要包括基本选择器、关系选择器及伪选择器中的部分类型。总之,一句话概括的话:选择器的作用就是从HTML文档中找出需要设置样式的一个或者多个HTML元素。


基本常用选择器

本文中我们选取部分常用选择器对其语法进行简单说明,并通过实例进行应用说明与展示。

(一)基本选择器

基本选择器中元素选择器、类选择器与ID选择器是较为常用选择器,也是大部分教材中详细介绍过的选择器类型。常用基本选择器描述如下图:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(3)

基本选择器中常用类型说明


属性选择器

在基本选择器中以上4类为常用选择器,除此之外初学者使用较少但非常重要的选择器为属性选择器。属性选择器主要根据元素的属性确定选择元素并进行样式的设置。属性选择器主要类型包括7种不同类型选择器,描述如下图所示:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(4)

CSS 属性选择器

CSS属性选择器常用的其中方法描述如上图所示,通过属性值的选择方式确定选中的元素,进而实现元素样式的设置。属性选择器说明如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(5)

常用属性选择器说明

以下我们通过实例进行说明,HTML代码描述如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(6)

示例代码

我们在页面中添加6个不同层,并设置其基本样式,如上图所示,通过使用属性选择器实现样式的改变。原始页面效果如下图:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(7)

原始页面效果

1、[attr]选择器

该选择器主要根据属性名称确定选中的标记,并对其进行设置。我们将示例文件中的前三个div设置ID属性并以此为选择条件进行DIV样式修改。代码部分如下:

<div id="a">1</div> <div id="2">2</div> <div id="3">3</div>

编写选择器如下:

[id]{background-color: red;}

通过该选择器的使用可以准确找到需要设置样式的元素。最终实现效果如下图所示:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(8)

[attr]选择器

2、[attr=value]选择器

以第一种选择器相比较除属性名称之外还需要满足取值等于value。如我们需要将上例中id值为2的DIV进行样式设置,则可直接编写选择器:

[attr="2"]{background-color:red;}

通过value值对attr属性进行筛选,最终找到符合条件的DIV实现背景颜色变化。测试效果如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(9)

[attr=value] 选择器

3、[attr~=value]选择器

该选择器可以选择对应属性attr的值为列表形式,且值列表中包含value值。如我们在定义样式中对于多个类选择器的使用一般写法如下:

<div class="cl1 cl2 cl3" id="4">4</div>

上述代码即符合多个属性值,中间空格隔开,因此我们可以编写选择器实现对这个DIV的选择。实现代码如下:

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我们选中该DIV实现样式设置,最终呈现效果如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(10)

[attr~=value]选择器

4、[attr|=value]选择器

该选择器主要对attr属性取值为value或者以value-为前缀的元素进行选择。我们将第五个DIV代码进行修改描述如下:

<div class="pure-g pure-from">5</div>

如果要选择这个DIV我们可以编写以下选择器,代码如下:

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通过以上选择器及样式编写,可将第五个DIV样式进行修改,显示结果如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(11)

[attr|=value]选择器

5、[attr^=value]选择器

该选择器基本与|value选择器类似,只是要求取值为value开头的值。我们修改第六个DIV的代码如下:

<div id="mytest">6</div>

通过编写选择器,在value中包含my进行测试,选择器代码如下:

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代码中我们修改了背景颜色为黄色,测试结果如下所示:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(12)

[attr^=value]选择器

6、[attr*=value]选择器

该选择器要求属性attr对应的属性值中包含value,如果包含则选中该元素。我们将第二个DIV进行代码编写,如下:

<div class="val1 val2 val3">2</div>

我们定义如下选择器:

[class*="val1"]{background-color:magenta;}

通过以上选择器我们可以选中第二个DIV,并实现样式设置,我们将背景颜色改为magenta。实现效果如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(13)

6、[attr*=value]选择器

7、[attr$=value]选择器

该方法用于选择attr属性值中以value结尾的元素。我们将第三个DIV代码进行修改,如下:

<div id="mylast">3</div>

编写选择器代码如下:

[id$="last"]{background-color:steelblue;}

通过该选择器可以选择第三个DIV并对其背景颜色进行设置,测试结果如下:

css基本选择器使用教程(一文快速读懂CSS属性选择器)(14)

[attr$=value]选择器

以上给出了常用的基本属性选择器与属性选择器的说明及实例分析。下篇文章我们将对关系选择器进行说明。


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可在评论区回复。更多程序设计相关教程及实例分享,期待大家关注与阅读!相关文章链接如下:

Web前端设计-JavaScript动态设置CSS样式实例分析

前端设计-JavaScript实现复选框的分组单选

,