CSS 属性选择器

CSS 属性选择器

CSS中的属性选择器可以实现对特定属性值的元素定义样式，控制显示效果。

[attribute] 选择器方式

语法中的 [attribute] 选择器用于选取带有指定属性的元素。

示例

img[alt]{border:3px solid #060;}

该样式定义了所有具备alt属性的img图标边框样式。

试一试

[attribute=value] 选择器

该选择器是指定属性名称和属性值的选择器。

示例

input[type=text]{background-color:yellow;}

试一试

[attribute~= value ] 选择器

[attribute~= value ] 选择器和[attribute=value]类似，但具体含义不同[attribute~= value ] 其中的~=表示该属性值的内容只要包含制定的内容就可以。

示例

a[title~= linux ] {

 border: 5px solid yellow;

该示例定义了所有a元素中title内容只要包含linux字，其边框样式就被应用。

注意：上面的例子会匹配以下属性的元素：title= linux 、title= linux 教程 以及 title= linux 发行 ，但不匹配：title= 嗨linux265 或 title= linux265 。

试一试

[attribute|= value ] 选择器

[attribute|= value ] 选择器表示选取指定属性以指定值value开头的元素。

例如，下例选取 title 属性以 linux 开头的所有元素：

注意：值必须是完整或单独的单词，比如 title= linux 或者后跟连字符的，比如 title= linux-text 。

示例

a[title|= linux ] {

 background: yellow;

试一试

[attribute^= value ] 选择器

[attribute^= value ] 选择器表示选取指定属性以指定值开头的元素，而这里的value不必是完整单词。

下例选取所有 a 元素 title 属性以 linux 开头的所有元素：

示例

a[class^= linux ] {

 border:1px solid yellow;

试一试

[attribute$= value ] 选择器

[attribute$= value ] 选择器表示选取指定属性以指定值结尾的元素，其中值不必是完整单词。

下例选取 title 属性以 linux 结尾的所有a元素：

示例

a[title$= linux ] {

 background: yellow;

试一试

[attribute*= value ] 选择器

[attribute*= value ] 选择器选取属性值包含指定词的元素，需要注意的是value值不必是完整单词。

例如选取 title 属性包含 linux 的所有元素：

示例

a[title*= linux ] {

 background: yellow;

试一试

设置表单样式

设置表单样式时，我们常常会对元素添加 class 或 id 属性，便于更精确设置表单元素样式。但如果对于没有设置class或者id属性的表单元素来说，属性选择器将会非常有用。

示例

input[type= text ] {

 width: 150px;

 display: block;

 margin-bottom: 10px;

 background-color: yellow;

input[type= button ] {

 width: 120px;

 margin-left: 35px;

 display: block;

试一试

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59548.html

linuxphp