1、CSS选择器

 

1.元素选择器 :p {color:red;}

2.通配选择器:* {color:red;}

3.类选择器  .waring {color: red ; }   选择属性包含waring的所有元素( class="urgennt waring"也可匹配)

4.多类选择器 .waring .urgent {color:red;}  仅选择属性同时包含waring urgent 的元素

5.ID选择器  #waring {color:red;}

6.属性选择器  (1)简单属性选择 :a [href] [title] {color:red;}

                 选择同时含有href、title属性的所有a元素;

            (2)具体属性值选择:a [title="W3Cschool"] {color:red;}

                 选择title属性值为“W3Cschool”的所有a元素,必须与属性值完全一样

            (3)部分属性值选择:p [class~="waring"] {color: red;}

              选择class属性包含waring的所有元素,类同于 .waring {color:red ;}

                                 p [class^="bar"]   选择class属性值以“bar”开头的所有元素

              P [class$="bar"]    选择class属性值以“bar”结尾的所有元素

              P [class*="bar"]    选择class属性值包含子串“bar”的所有元素,可与class=“bargain”匹配

            (4)特定属性选择:*[ lang |=" en"] {color :red;}

            选择lang属性等于en或者以en开头的所有元素

 7.后代选择器:

        如:h1 em {color:red;}   选择h1 元素的所有后代em 元素(包括子元素、孙元素。。。)

      (1)选择子元素:h1>strong  {color:red; }

           选择h1下面出现的作为子元素的所有strong元素

      (2)选择相邻兄弟元素:li +li {color:red;}

               选择紧接在一个li元素后出现的所有li元素,即选择列表中第二个及以后的列表项,第一个列表项未被选中

 8.伪类选择器:

       (1)链接伪类:a:link {color:red;}   未访问的链接

                a:visited {color: red;} 已访问的链接

       (2)动态伪类:可应用到任何元素

        :focus  指示当前输入焦点的元素

        :hover 指示鼠标指针停留在哪个元素

        :active 用户点击链接时

       建议顺序:link——visited——hover——active(否则hover或active的样式会被覆盖掉)

   (3)静态伪类: p :first-child {color:red;}

               选择作为某元素第一个子元素的所有p元素,不是选择p元素的第一个子元素

        (4)根据语言选择:*:lang(fr) {color:red;}

             把所有法语元素变成斜体,类似于*[ lang |=" en"] {color :red;}

             注意:在需要语言特定样式时,最好使用伪类选择器

        (5)结合伪类:

      a:link:hover {color:red;}可在同一个选择器中结合使用,顺序不重要

 9.伪元素选择器:

         (1)设置首字母样式: h2 :first-letter {color :red;}

         (2)设置第一行的样式: p:first-line {color:red;}

      注:所有伪类元素都必须放在出现该伪类元素的选择器后面

      如:p:first-line em是不合法的,应该为p em :first-line

         (3)设置之前和之后元素的样式:

      如:h2 : before {content: "{}";}   在h2前加一对大括号

            body:after {content:“the end”;}

posted @ 2016-03-10 21:24  cjlalala  阅读(191)  评论(0编辑  收藏  举报