当前位置:首页 > 资讯 > info5 > 正文

css入门——选择器

发表于: 2015-08-02   作者:java_c_android   来源:转载   浏览:
摘要: 引入与分类    参考:样式与link标签。如 test---html span{font-size:50px;color:green} 这是外部样式表 这是内部样式表 这是内联样式      在上面的代码中,通过三种方式分别引进了样式。通过link引进的称为外部样式表,通过标签声明的称为内部样式表,直接在标签内部通过style属性声明的称为内联样式。这三咱样式的优先级依次增大,即:

引入与分类

        参考:样式与link标签。如

<head>
    <title>test---html</title>
    <meta charset="utf-8" />
    <!--引入外部样式表,定义了p标签的样式-->
    <link rel="stylesheet" type="text/css" href="./test.css">
    <style type="text/css">
    	span{font-size: 50px;color: green}
    </style>
</head>
<body>
	<p>这是外部样式表</p>
	<span>这是内部样式表</span>
	<p style="font-size:60px;color:blue">这是内联样式</p>
</body>

        在上面的代码中,通过三种方式分别引进了样式。通过link引进的称为外部样式表,通过<style>标签声明的称为内部样式表,直接在标签内部通过style属性声明的称为内联样式。这三咱样式的优先级依次增大,即:内联样式会覆盖内部样式表,内部样式表会覆盖掉外部样式表,外部样式表会覆盖掉浏览器自带的默认样式表

        不同的css之间可以通过@import url()的形式导入。如@import url(test1.css);

语法

        CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。其中选择器指的就是要改变样式的html标签,声明就是要改变的属性和该属性的值。每一条声明都是用冒号进行赋值,不同的声明之间需要用分号分隔开(虽然最后一条声明不需要加上分号,但最好还是加上),并且将所有的声明用一个{}括起来。如

css入门——选择器_第1张图片

声明

        声明的值是不需要加引号的,但如果声明的某个值由多个单词组成,就需要给这个值加上引号如果声明的值是多个,这些值之间用逗号隔开。如

p{font-size: 40px;
</span>color: red;
/*由两个值构成,中间用逗号隔开;第二个值由多个单词组成,所以用引号引起来*/
font-family: Times,"Times New Roman";
}
        在上面的样式中,最后一条声明的值是多个,中间使用逗号进行分隔;并且第二个值是由多个单词组成的,所以需要使用引号。

        声明也是可以分组的,如上面的p标签,完成可以拆分成三个样式(一个样式中只有一条声明)。注意,对声明分组,一定要在各个声明的最后使用分号

选择器

        选择器就是要改变样式的html标签。

元素选择器

        就是以html的标签做为选择器。它会匹配该文档该标签的所有实例 。因此,也可以为xml文档中的标签设置样式。如

<style type="text/css">
    	test{color:yellow;}
</style>
<body>
	<test>imyaxml</test>
</body>

分组

        可以将选择器进行分组,这样多个选择器可以使用同一条声明,只需要将不同的选择器用逗号分开即可。如

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

        在分组选择器中有一类很特殊的选择器:通配符选择器该选择器可以与文档中的任何元素匹配。这个选择器等同于列出文档中所有的标签的一个分组选择器,并用*代表所有的标签。如

* {color:red;}

继承  

        在css规则中,子标签从父标签继承属性,如果子标签不想使用父标签的样式,那么需要给子标签重新添加样式。如

body  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

类选择器

基础

        类选择器允许以一种独立于文档标签的方式来指定样式。为了将类选择器的样式与标签关联,必须将标签的clas属性指定为一个适当的值。然后在类名前面加点(.),即可定义一个类选择器。
<head>
    <title>test---html</title>
    <meta charset="utf-8" />
    <style type="text/css">
    	.test{font-size: 50px;color: rgb(180,23,78);}
    </style>
</head>
<body>
	<p class="test">imyaxml</p>
	<p>mfdafa</p>
</body>

结合元素选择器

       类选择器也可以和元素选择器结合使用。只需要在点号(.)前加上标签名即可。如:p.test,该选择器会匹配class属性包含test的所有p标签。
 
         虽然span标签的class值也为test,但在定义类选择器时结合了p标签,因此这个选择器对span是无效的。 
 
       这点要与后代选择器区分开:后代选择器不同的选择器之间用[空格]隔开,而结合选择器却是直接写在一起的。

多类选择器

       class属性可以为词列表,不同词之间用空格隔开即可。因此,可将类选择器结合,如.demo.test,此时便要求class属性值中必须含有demo和test两个记号,否则不会被选择。
       要注意:类选择器可能区分大小写,因此最好还是一致。
 
  

id选择器

        类似于类选择器,但以#开头,并且引用标签中id属性的值。
        不同于class属性,id属性不支持词列表,因此id选择器不能结合使用,即无法写成#id1#id2形式。
        也要注意区分大小写,也支持与元素选择器结合使用。
        一个文档中,id是唯一的,因此id选择器在一个文档中最多只会使用一次。(谷歌,safari是可以同名id)

属性选择器

        根据标签的属性和属性值选择标签。

简单选择

        只需要标签拥有该属性,而不考虑属性值是什么,此时就可以使用简单的属性选择器。其格式为
标签名[属性名1][属性名2]{声明1;声明2}
    <style type="text/css">
    	img[alt]{border: 5px solid red;}
    </style>
</head>
<body>
	<img src="./bg.png" alt="test"/><img src="./bg.png" />
</body>
        该选择器只对第一个img标签有用,对第二个无效。因为第二个img标签并没有设置alt属性。
        如果想根据多个标签进行选择,只需要在后面跟上别的属性即可。如img[alt][width],这个选择器不会选择只定义了alt属性的标签。

根据属性值选择

        除了根据属性选择外,还可以进一步缩小选择范围——含有特定属性值的属性的标签才能被选择。基本格式为
标签名[属性名1="属性值1“][属性名2="属性值2“]{声明1;声明2}
    <style type="text/css">
    	img[alt="test---html"]{border: 5px solid red;}
    </style>
</head>
<body>
	<img src="./bg.png" alt="test---html" />
	<img src="./bg.png" alt="test--html">
</body>
        上面的选择器只对第一个img标签有用,对第二个无效,因为第二个img标签的alt属性值不是test---html不满足属性选择器。
        在上面的例子中,属性和属性值必须完全匹配才能被选择。

部分属性值选择

        如果属性值是词列表,并且只要词列表中存在某个词,该标签就会被选择。在此种情况下,需要使用部分属性值选择。格式
标签名[属性名~=属性值][属性名~=属性值]{声明1;声明2}
    <style type="text/css">
    	    img[class~="test"]{border: 5px solid red;}
    </style>
</head>
<body>
	<img src="./bg.png" class="test demo ha" />
	<img src="./bg.png" class="demo" />
</body>
        上述选择器会作用于第一个标签,不会作用于第二个标签。因为第一个标签的class属性值含有test词,而第二个没有。
        这点类似于与元素选择器结合使用时的类选择器,如p.test表示只要class属性值中有test词即可,完全等同行img[class~="test"],但后者的适用范围更广,不但能用于class属性,还可用于别的属性,前者却只能使用于class属性。

匹配规则


        第三种指的是:属性值列表中必须包含有指定的value,而不是包含以value开头的词。如

<style type="text/css">
    	  h1[alt~="normal"]{color: red;font-size: 60px}
    </style>
</head>
<body>
	<h1 alt="normal fadf">span下的em标签</h1>
	<h1 alt="normal1 fadf">span下的em标签</h1>
        这个属性选择器可以选择第一个,但不能选择第二个。因为第二个h1标签的alt属性值并不包含normal单词。

        第四个只会匹配以value-开头的属性值(将属性值当作整个单词)或者属性值为value的标签。如

<style type="text/css">
    	  h1[alt|="normal"]{color: red;font-size: 60px}
    </style>
</head>
<body>
	<h1 alt="normal-  demo">span下的em标签</h1>
	<h1 alt="normal">fdaf</h1>
	<h1 alt="normala">span下的em标签</h1>
</body>
        上述的选择器只会匹配前两个标签,不会匹配最后一个标签。

其中后三者可按如下理解

css入门——选择器_第2张图片

        不管属性值是词列表还是单个单词,前后是否有空格,在^$*时,都按一整个单词(空格也算)匹配。如[class^="test"]是可以匹配class属性值为"test-    demo  ---haha"的标签的,但无法匹配"    test"标签。

后代选择器

        将父标签与后代标签通过空格连接组成的选择器。具体可以理解为:在父标签下的某个后代标签才会被选择,否则不会被选择。如h1 em{color:red;}只会作用于h1标签下的em标签,并不会作用于p标签下的em标签。

        后代标签与父标签的层级间隔可以无限。

        可以和其它选择器结合使用,如

h1[alt^="normal"] em{color: red;}
        它表示alt属性值以normal开头的h1标签下的em标签才会被选中,其余的都不会被选中。

子元素选择器

        类似于后代选择器,但子元素选择器只能选择做为某标签子标签的标签,并且用>进行连接。如

h1>em{color: red;}
        它表示做为h1的子标签的em标签才会被选中。

相邻兄弟选择器

        两标签具有相同的父标签,并且两标签相邻,且标签出现的顺序和样式中定义的顺序一致,第二个标签才会被选中。如

p + h1 {margin-top:50px;}
        它会作用于
<p>This is paragraph.</p>
<h1>This is a heading.</h1>

        但如果将样式改写成h1+p,那么不会作用于下面的代码。

伪类选择器

        所谓的伪类就是一个状态,比如鼠标悬停,已点击过等。类似于android中的selector。格式为

selector : pseudo-class {property: value}
常用的伪类如下:
css入门——选择器_第3张图片

最常用的就是:hover,鼠标悬停时的状态。如:

h1:hover{color: red;font-size: 60px}

        active:鼠标点上去尚未放开时的状态,该状态一般不写。hover:鼠标放上去,但未点击时的状态;visited:已经访问过的状态。写这几种状态时,一定要按lvha顺序进行操作,其中a:link可以简写成a

优先级

        总体来说,谁的范围越精确,最后的结果就按哪个选择器进行。因此,类选择器比元素选择器的优先级高,即使元素选择器是后代选择器,兄弟选择器,子元素选择器。而属性选择器又比类选择器优先级高,但id选择器比属性选择器优先级高(因为id是唯一的,而属性可以不唯一)。如果说

关系如下:

元素选择器 < 类选择器 < 属性选择器 < id选择器

css入门——选择器

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
CSS的选择器 最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一
三种基本选择器: 类型选择器:以文档语言对象类型作为选择符,匹配指定的元素。 p {color:red;}
1. 选择器浏览器支持情况 使用CSS选择器时,要考虑到不同浏览器下的支持情况,主要是IE的不同版本。
1、标签选择器 p{ font-size: 12px; background: #900; color: 090; } 2、ID选择器 <style> #
CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对C
基本规则 每CSS规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性
CSS选择器的重要性不言而喻。可以说没有选择器就没有CSS。选择器大概可以分为下面几个类别:元素选
在这里主要总结了三个较为常用的选择器,熟练掌握这些选择器的使用,能够灵活地处理网页,作为初学
伯乐在线注:我们昨日在 @程 序员的那些事 微博上推荐了英文原文,感谢 @freestyle21 和 @沈涛-WEB
前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS3基本选择器、CSS3属性选择
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号