CSS属性选择器的类型– Semalt Expert

HTML元素由类,ID和属性组成。属性选择器选择具有属性或具有属性值的HTML元素。属性选择器提供了一种在具有特定属性或特征值的HTML元素上应用样式的简单方法。属性选择器由两个方括号定义,两个方括号将属性及其值括起来。不过,您可以在其前面放置一个元素类型选择器。 CSS [属性]选择器在元素由给定特征组成的情况下将样式规则应用于元素。

属性选择器的类型

属性选择器有不同类型,每种类型可用于不同的情况:

CSS [attribute | =“ value”]选择器突出显示具有特定特征的元素,并从定义的值开始。

CSS [attribute〜=“ value”]选择器用于查找具有特定单词的属性值的元素。

CSS [attribute ^ =“ value”]选择器查找具有一个特定值的属性值的元素。该值不一定是一个完整的词。

CSS [attribute $ =“ value”]选择器查找具有以定义值结尾的属性值的组件。

CSS属性选择器的应用

可以使用多种方法来使用属性选择器,而不是使用通用,类或ID选择器

属性选择器最常见的用法是在输入上。这些包括文本选择器,复选框选择器,密码选择器,文件选择器,隐藏选择器,密码选择器,单选按钮选择器,重置选择器等。

造型形式

在样式设置没有类或ID的表单时,属性选择器非常有用。

样式链接

例如,属性选择器可用于设置博客列表的样式,其中您具有指向朋友站点的链接列表。但是,您希望每个链接的样式都不同。解决该问题的传统方法是分配一个呼叫名称,这将需要更多的标记。不过,您可以使用第n个子项,该子项要求订单永远不变。使用属性选择器非常容易,因为存在可以定位的属性。

边框输入

使用CSS border image属性设置边框元素的样式是将图像添加到主体的一种优雅方法。它允许您将图像定义为元素的边框。可以按不同方式缩放,切片,重复边界图像,以确保其适合边界区域。 borders radius属性允许在不使用图像的情况下添加圆角。该属性定义角的形状。

样式颜色

CSS属性选择器使设置具有特定颜色值的所有元素的样式变得简单。您可以使用color关键字,RGB(),RGBA(),HSL()和HSLA()表示法。 RGBA颜色值是RGB颜色模型的扩展,其中包含定义颜色不透明度的通道。参数值的范围是从1.0(不透明)到0.0(透明)

HSL颜色模型被解释为(Hue_saturation_Lightness)。色相表示形式为角度(0-360)或色轮。饱和度和亮度的测量单位为百分比,饱和度的0%表示阴影或灰色,而100表示全彩色。 100%的亮度表示白色,而0%的颜色表示黑色。