css学习之css选择器（2）

2014-07-14

1、CSS [attribute] Selector

版本：css2

用法：用于选择具有指定属性的元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS [attribute] Selector</title>
<style id="jsbin-css">
a[target]
{
background-color:yellow;
}
a[title]
{
  background-color:red;
}
</style>
</head>
<body>
  <a href="http://dsky.pw" title="">我没有target,我有title</a>
  <a href="http://dsky.pw" target="_blank">我有target，我没有title</a>
</body>
</html>

预览地址：http://jsbin.com/qiqoq/1

2、CSS [attribute=value] Selector

版本：css2

用法：用于选择拥有指定属性的元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS [attribute=value] Selector</title>
<style id="jsbin-css">
a[target]
{
background-color:yellow;
}
a[target=_blank]
{
  background-color:red;
}
</style>
</head>
<body>
  <a href="http://dsky.pw">dsky的小屋</a>
<a href="http://dsky.pw" target="_blank">我是target="_blank"</a>
<a href="http://dsky.pw" target="_top">我是target="_top"</a>
</body>
</html>

预览地址：http://jsbin.com/qiqoq/2

3、CSS [attribute~=value] Selector

版本：css2

用法：选择含有指定属性的元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS [attribute~=value] Selector</title>
<style id="jsbin-css">
a[title~=dsky1]
{
background: yellow;
}
a[title~=dt2]
{
background: red;
}
a[title~=dsky3]
{
background: #666;
}
</style>
</head>
<body>
  <a href="http://dsky.pw" title="dsky1 dt">dsky的小屋1</a>
  <a href="http://dsky.pw" title="dsky dt2">dsky的小屋2</a>
  <a href="http://dsky.pw" title="dsky3 dt">dsky的小屋3</a>
</body>
</html>

预览：http://jsbin.com/qiqoq/3

4、CSS [attribute|=value] Selector

版本：css2

用法：选择元素属性值以指定值开始的元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS [attribute|=value] Selector</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>

<style id="jsbin-css">
[lang|=en]
{
background:yellow;
}
</style>
</head>
<body>
<p lang="en">以en开头</p>
<p lang="en-us">以en开头</p>
<p lang="en-gb">以en开头</p>
<p lang="us">没有以en开头</p>
<p lang="no">没有以en开头</p>
</body>
</html>
</body>
</html>

预览：http://jsbin.com/qiqoq/4