购物车
登陆 / 注册
微信扫码登陆

CSS 属性选择器

CSS 属性选择器
在CSS中属性选择器可以根据元素的属性及属性值来选择元素,本章节将简单介绍CSS 属性选择器的使用方法。
编辑:前端控 前端控 更新时间:2019-02-01 13:50:41

CSS 属性选择器

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

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

属性选择器

把代码中所有包含“title”的所有元素变为粉色

实例

<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:pink;
}
</style>
</head>
<body>
<h1 title="HTML中文网">HTML中文网</h1>
<h1>HTML中文网</h1>
<h1 title="HTML中文网">HTML中文网</h1>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

属性和值选择器

改变title='HTML'元素的边框样式

实例

[title=HTML]{
	border:1px solid #ccc;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

属性和值的选择器:多值

指定值为title=HTML属性的多个元素样式使用(~)或者(|)分隔属性和值:

实例

[title~=HTML]{
	border:1px solid #ccc;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 6.jpg

CSS 选择器参考手册

选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号