码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础学习七:属性选择器

时间:2015-11-12 22:02:37      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:css   选择器   web前端开发   dreamweaver   属性选择器   

       CSS语法中,对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限

于 class 和 id 属性。(注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。

IE6 及更低的版本不支持属性选择器。)

       CSS2引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

       一简单属性选择器

       如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

       (1)先来一个简单的例子:为带有 title 属性的所有元素设置样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="phpStudy" href="http://phpStudy.net">phpStudy</a>

<hr />

<h1>无法应用样式:</h1>
<h2>Hello world</h2>
<a href="http://phpStudy.net">phpStudy</a>
</body>
</html>
       浏览器运行的结果为:

技术分享

       (2)与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式:</h1>
<a href="http://phpStudy.net">phpStudy</a>

<hr />

<h1>无法应用样式:</h1>
<a name="phpStudy">phpStudy</a>
</body>
</html>
        结果显示为:

技术分享

       (3)还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。例如,为了将同时有 href 和 title 属性的

 HTML 超链接的文本设置为红色,可以这样写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href][title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式:</h1>
<a title="phpStudy Home" href="http://phpStudy.net">phpStudy</a>

<hr />

<h1>无法应用样式:</h1>
<a href="http://phpStudy.net">phpStudy</a>
<a title="phpStudy Home">phpStudy</a>
</body>
</html>
      运行结果为:

技术分享

       二属性和值选择器

       根据标签中的具体属性值选择,除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性

值的元素。
       下面的例子为 title="phpStudy" 的所有元素设置样式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title=phpStudy]
{
border:5px solid blue;
}
</style>
</head>

<body>
<h1>可以应用样式:</h1>
<h2 title="phpStudy">Hello world</h2>
<a title="phpStudy" href="http://phpStudy.net">phpStudy</a>

<hr />

<h1>无法应用样式:</h1>
<p title="greeting">Hi!</p>
<a class="phpStudy" href="http://phpStudy.net">phpStudy</a>
</body>
</html>
       浏览器运行的结果为:

技术分享

       需要注意的是:

       属性与属性值必须完全匹配。请注意,这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列

表,匹配就可能出问题。

       请考虑一下的标记片段:

<p class="important warning">This paragraph is a very important warning.</p>

       如果写成 p[class="important"],那么这个规则不能匹配示例标记。

       要根据具体属性值来选择该元素,必须这样写:

p[class="important warning"] {color: red;}

       三属性和值选择器 - 多个值

       根据部分属性值选择

       如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

       假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

p[class~="important"] {color: red;}

       如果忽略了波浪号,则说明需要完成完全值匹配。

      下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title~=hello]
{
color:red;
} 

</style>
</head>

<body>
<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello phpStudy students!</h1>
<hr />

<h1>无法应用样式:</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello phpStudy students!</p>
</body>
</html>
       浏览器运行的结果为:

技术分享

       提示:

       部分值属性选择器与点号类名记法的区别

       该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说,p.important 和 p["important"] 应用

 HTML 文档时是等价的。那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。

       例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性

选择器,只选择这些图片:

  img[title~="Figure"] {border: 1px solid gray;}
       这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不

会匹配。

        四特定属性选择类型

        关于特定属性选择器。请看下面的例子:

[lang|="en"] {color: red;}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

       上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

       下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式:</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p></body>
</html>
         浏览器运行的结果为:

技术分享

        五子串匹配属性选择器

        下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。

按照规范的说法,应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器,包括 IE7。

       下表是对这些选择器的简单总结:

技术分享

       可以想到,这些选择有很多用途。

       举例来说,如果希望对指向 phpStudy 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写

样式。可以指定规则为:

 a[href*="phpStudy.net"] {color: red;}
        这个例用等我们用到的时候再详细的解释。还有就是作用无class属性的表单也非常的方便。

      







版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS基础学习七:属性选择器

标签:css   选择器   web前端开发   dreamweaver   属性选择器   

原文地址:http://blog.csdn.net/erlian1992/article/details/49804205

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!