css修改select选择框option被选中的背景颜⾊_Web前端设计-
常⽤CSS选择器。。。
常⽤CSS选择器说明及实例分析
CSS选择器(Selector)是⽤于实现⽹页页⾯定义的基础，选择器的主要作⽤在于确定指定的单个元素或者⼀类元素。在获取元素之后即可以对所获取的元素进⾏样式的定义。最终为⽤户呈现不同交互视觉风格的前端页⾯。本⽂主要对常⽤CSS选择器基本概念与常⽤属性选择器进⾏说明与实例展⽰。
CSS Selector类型划分
按照W3C技术规范划分⽬前CSS Selector主要类型可以划分为基本选择器、关系选择器、伪选择器三种类型不同的选择器。⽬前主要CSS 选择器类型及分类描述如下图所⽰：
CSS Selector分类图
CSS Selector选择器主要分类描述如上图，其中我们较为常⽤的选择器主要包括基本选择器、关系选择器及伪选择器中的部分类型。总之，⼀句话概括的话：选择器的作⽤就是从HTML⽂档中出需要设置样式的⼀个或者多个HTML元素。
基本常⽤选择器
本⽂中我们选取部分常⽤选择器对其语法进⾏简单说明，并通过实例进⾏应⽤说明与展⽰。
(⼀)基本选择器
基本选择器中元素选择器、类选择器与ID选择器是较为常⽤选择器，也是⼤部分教材中详细介绍过的选择器类型。常⽤基本选择器描述如下图：
基本选择器中常⽤类型说明
属性选择器
在基本选择器中以上4类为常⽤选择器，除此之外初学者使⽤较少但⾮常重要的选择器为属性选择器。属性选择器主要根据元素的属性确定选择元素并进⾏样式的设置。属性选择器主要类型包括7种不同类型选择器，描述如下图所⽰：
cssclass属性
CSS 属性选择器
CSS属性选择器常⽤的其中⽅法描述如上图所⽰，通过属性值的选择⽅式确定选中的元素，进⽽实现元素样式的设置。属性选择器说明如下：
常⽤属性选择器说明
以下我们通过实例进⾏说明，HTML代码描述如下：
⽰例代码
我们在页⾯中添加6个不同层，并设置其基本样式，如上图所⽰，通过使⽤属性选择器实现样式的改变。原始页⾯效果如下图：
原始页⾯效果
1、[attr]选择器
该选择器主要根据属性名称确定选中的标记，并对其进⾏设置。我们将⽰例⽂件中的前三个div设置ID属性并以此为选择条件进⾏DIV样式修改。代码部分如下：
1
2
3
编写选择器如下：
[id]{background-color: red;}
通过该选择器的使⽤可以准确到需要设置样式的元素。最终实现效果如下图所⽰：
[attr]选择器
2、[attr=value]选择器
以第⼀种选择器相⽐较除属性名称之外还需要满⾜取值等于value。如我们需要将上例中id值为2的DIV进⾏样式设置，则可直接编写选择器：
[attr="2"]{background-color:red;}
通过value值对attr属性进⾏筛选，最终到符合条件的DIV实现背景颜⾊变化。测试效果如下：
[attr=value] 选择器
3、[attr~=value]选择器
该选择器可以选择对应属性attr的值为列表形式，且值列表中包含value值。如我们在定义样式中对于多个类选择器的使⽤⼀般写法如下：
4
上述代码即符合多个属性值，中间空格隔开，因此我们可以编写选择器实现对这个DIV的选择。实现代码如下：
[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}
我们选中该DIV实现样式设置，最终呈现效果如下：
[attr~=value]选择器
4、[attr|=value]选择器
该选择器主要对attr属性取值为value或者以value-为前缀的元素进⾏选择。我们将第五个DIV代码进⾏修改描述如下：
5
如果要选择这个DIV我们可以编写以下选择器，代码如下：
[class|="pure"]{font-size: 36px;color:white; background-color: gray;}
通过以上选择器及样式编写，可将第五个DIV样式进⾏修改，显⽰结果如下：
[attr|=value]选择器
5、[attr^=value]选择器
该选择器基本与|value选择器类似，只是要求取值为value开头的值。我们修改第六个DIV的代码如下：
6
通过编写选择器，在value中包含my进⾏测试，选择器代码如下：
[id^="my"]{font-size: 36px;color:white; background-color: yellow;}
代码中我们修改了背景颜⾊为黄⾊，测试结果如下所⽰：
[attr^=value]选择器
6、[attr*=value]选择器
该选择器要求属性attr对应的属性值中包含value，如果包含则选中该元素。我们将第⼆个DIV进⾏代码编写，如下：
2
我们定义如下选择器：
[class*="val1"]{background-color:magenta;}
通过以上选择器我们可以选中第⼆个DIV，并实现样式设置，我们将背景颜⾊改为magenta。实现效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。