选择器

  1. 标签选择器(如:body,div,p,ul,li)

  2. .类选择器(如:class="head",class="head_logo") 

  3. ID选择器(如:id="name",id="name_txt")

  4. 全局选择器(如:*号)

  5. .组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

  6. .继承选择器(如:div p,注意两选择器用空格键分开)

  7. 伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

  8. 字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 

           以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器,下面是这三种选择器的基本用法

          1、标签名选择器 一个XHTML文档中有许多标签,例如p标签,h1 标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。 

1
2
div {color:red;border:1px blue solid;} 
p {color:#000;}

          2、类选择器 使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标                  签赋予不同的CSS样式就应使用类选择器。

1
2
<div class="test">测试代码</div> 
.test {color:red;border:1px blue solid;}

          3、id选择器,id选择器是唯一的,只可以获取独一无二的一个元素。                                                              

          3、id选择器,id选择器是唯一的,只可以获取独一无二的一个元素。

1
2
<div id="test">测试代码</div> 
#test {color:red;border:1px blue solid;}

            注意:

               1.选择器的特殊性--权限规则

                   标签权限:1

                  类选择器权限:10

                 ID选择器权限:100

                继承权限:最低

            如: <p class="first">我是一个好孩子</p>

                     p{color:red;}、  .first{color:green;}  p和first都匹配在p标签上,但是最后会显示绿色

             2.层叠

               在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用     

                 p{color:red;}
                 p{color:green;}
                <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

                 最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

             

posted @ 2017-08-20 16:22  菲飞飞  阅读(142)  评论(0编辑  收藏  举报