CSS 特性挑选器

日期：2021-03-02 类型：科技新闻 

关键词：在线小程序开发，微信小程序怎么做店铺，小程序logo设计，小程序平台，小程序码生成

对带有特定特性的 HTML 元素设定款式。

能够为有着特定特性的 HTML 元素设定款式，而不但限于 class 和 id 特性。

注解：仅有在要求了 !DOCTYPE 时，IE7 和 IE8 才适用特性挑选器。在 IE6 及更低的版本号中，不适用特性挑选。

特性挑选器

下面的事例为带有 title 特性的全部元素设定款式：

[title]
{
color:red;
}

特性和值挑选器

下面的事例为 title="W3School" 的全部元素设定款式：

[title=W3School]
{
border:5px solid blue;
}

特性和值挑选器 - 好几个值

下面的事例为包括特定值的 title 特性的全部元素设定款式。可用于由空格隔开的特性值：

[title~=hello] { color:red; }

下面的事例为带有包括特定值的 lang 特性的全部元素设定款式。可用于由连标识符隔开的特性值：

[lang|=en] { color:red; }

设定表单的款式

特性挑选器在为不带有 class 或 id 的表单设定款式时非常有效：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

CSS 挑选器参照手册

挑选器
叙述
[attribute]
用于选择带有特定特性的元素。
[attribute=value]
用于选择带有特定特性和值的元素。
[attribute~=value]
用于选择特性值中包括特定语汇的元素。
[attribute|=value]
用于选择带有以特定值开始的特性值的元素，该值务必是全部单词。
[attribute^=value]
配对特性值以特定值开始的每一个元素。
[attribute$=value]
配对特性值以特定值末尾的每一个元素。
[attribute*=value]
配对特性值中包括特定值的每一个元素。

上一篇：详解Html/CSS中的标记学 返回下一篇：没有了