css greeting,CSS 属性选择器

全屏

CSS 属性 选择器

具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id。

注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

属性选择器

下面的例子是把包含标题(title)的所有元素变为蓝色：

实例html>

[title]

{

color:blue;

}

Will apply to:

Hello world

openketang.com

---

Will not apply to:

Hello!

运行结果

属性和值选择器

下面的实例改变了标题title='openketang'元素的边框样式:

实例html>

速学堂(openketang.com)

[title=openketang]

{

border:5px solid green;

}

将适用:

openketang

---

将不适用:

Hi!

openketang

运行结果

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用(~)分隔属性和值:

实例html>

速学堂(openketang.com)

[title~=hello]

{

color:blue;

}

将适用:

Hello world

Hello CSS students!

---

将不适用:

Hi CSS students!

运行结果

下面是包含指定值的lang属性的元素样式的例子，使用(|)分隔属性和值:

实例html>

速学堂(openketang.com)

[lang|=en]

{

color:blue;

}

将适用:

Hello!

Hi!

Ello!

---

将不适用:

Hi!

Hei!

运行结果

表单样式

属性选择器样式无需使用class或id的形式:

实例html>

速学堂(openketang.com)

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

}

Firstname:

Lastname:

运行结果

分享到：

0评论