CSS3的chapter2

CSS的选择符有很多,大致分为八种:

      • 通配选择符
      • 元素选择符
      • 群组选择符
      • 关系选择符
      • id及class类选择符
      • 伪类选择符
      • 属性选择符
      • 伪对象选择符

  1.通配选择符:

    可以使用模糊指定的方式来对对象进行选择。  

* {
color:blue;
background-color:red;
}

  2.元素选择符:

    指以网页中已有的标签名作为名称的选择符。  

h1{
color:red;
}

  3.群组选择符:

    对一组标签进行相同的样式定义。

                h1,p{
font-size:30px;
font-family:"微软雅黑";
color:#333;
}

  4.关系选择符:

    • 包含选择符(E F)
        选择所有被E元素包含的F元素。
      .son1 a{color:blue;}
    • 子选择符(E>F)
        选择所有作为E元素的子元素F。
      .son1>a{color:red;}
    • 相邻选择符(E+F)
            选择紧贴在E元素之后的F元素。
      .son1+div{color:green;}
    • 兄弟选择符(E~F)
            选择E元素所有的兄弟元素F。
      .son1~div{color:yellow;}

      效果图:
      CSS3的chapter2

  5.id及class类选择符:

    id选择符:

      可以为标有特定id的HTML元素指定特定的样式,以"#"来定义,每一个id名称只能使用一次,不得重复。

      

#p1{
font-size:12px;
font-weight:bold;
}

    class选择符:

      与Id选择符不同,class可以重复使用,将多个元素使用同一个样式定义。

.p1{
font-size:12px;
font-weight:bold;
}

  6.伪类选择符

    • E:link              ——设置元素E在未被访问前的样式
    • E:visited             ——设置元素E在已被访问后的样式
    • E:hover               ——设置元素E在其鼠标悬停时的样式
    • E:active              ——设置元素E在被用户激活时的样式
                  a{text-decoration: none;}
      a:link{color:red;}
      a:hover{color:green;}
      a:active{color:blue;}
      a:visited{color:purple;}

      效果是a标签在未访问前是红色,鼠标悬停时是绿色,鼠标点击时是蓝色,访问后时紫色。

    • E:focus             ——设置元素成为输入焦点时的样式
                  input:focus{background-color: blue;}

      效果是文本框在成为输入焦点时背景变为蓝色。

    • E:lang(fr)            ——匹配使用特殊语言的元素E
    • E:not(s)              ——匹配不含s选择符的元素E
    • E:root                 ——匹配元素E的在文档的根元素,常指html元素
    • E:first-child         ——匹配父元素的第一个子元素E
    • E:last-child         ——匹配父元素的最后一个子元素E
    • E:only-child         ——匹配父元素的仅有的一个子元素E
    • E:nth-child(n)      ——匹配父元素的第n个子元素E
    • E:nth-last-child(n)   ——匹配父元素的倒数第n个子元素E
                  li:only-child{color:red;}
      
                  li:first-child{color:red;}
      li:last-child{color:blue;}
      li:nth-child(2){color:yellow;}
      li:nth-last-child(2){color:yellow;}

      效果图:

    • CSS3的chapter2

    • E:first-of-type      ——匹配同类型中的第一个同级兄弟元素E
    • E:last-of-type      ——匹配同类型中的最后一个同级兄弟元素E
    • E:only-of-type      ——匹配同类型中的唯一的一个同级兄弟元素E
    • E:nth-of-type(n)   ——匹配同类型中的第n个同级兄弟元素E
    • E:nth-last-of-type(n) ——匹配同类型中的倒数第n个同级兄弟元素E
                  .ul3 li:only-of-type{color:red;}
      
                  li:first-of-type{color:red;}
      li:last-of-type{color:blue;}
      li:nth-of-type(2){color:yellow;}
      li:nth-last-of-type(2){color:yellow;}

      效果图:

      CSS3的chapter2

    • E:empty               ——匹配没有任何子元素的元素E
      input:empty{border-color:red;}

      效果为背景变成红色,因为input元素没有子元素。

    • E:checked                ——匹配用户界面上处于选中状态的元素E
      input[name="love[]"]:checked+label{color:blue;background-color:red;}

      CSS3的chapter2

    • E:enabled                ——匹配用户界面上处于可用的状态的元素E
      input:enabled{color:red;}

      CSS3的chapter2

    • E:disabled                ——匹配用户界面上处于禁用的状态的元素E
      input:disabled{color:blue;}

      CSS3的chapter2

    • E:target                   ——匹配相关URL指向的元素E

     

  属性选择符:

    • E[att]                    ——选择具有att属性的E元素。
      p[class]{color:green;}
    • E[att="val"]            ——选择具有att属性且属性值等于val的E元素
      p[class="qq"]{color:red;}     
    • E[att~="val"]          ——选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素
      p[class~="abc"]{color:blue;}
    • E[att^="val"]          ——选择具有att属性且属性值为以val开头的字符串的E元素。
      p[class^="aa"]{color:yellow;}       
    • E[att$="val"]          ——选择具有att属性且属性值为以val结尾的字符串的E元素。
      p[class$="abc"]{color:black;}
    • E[att*="val"]          ——选择具有att属性且属性值为包含val的字符串的E元素。
      p[class*="z"]{color:orange;}
    • E[att|="val"]       ——选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
      p[class|="y"]{color:#ccc;}

  伪对象选择符:

    • E::first-letter          ——设置对象内的第一个字符的样式。
      p::first-letter {font-size:20px;font-weight:bold;}
    • E::first-line            ——设置对象内的第一行的样式。
      p::first-line {color:blue;}/
    • E::before               ——设置在对象前发生的内容。用来和content属性一起使用
      p::before{content:'123';}
    • E::after                 ——设置在对象后发生的内容。用来和content属性一起使用
      p::after{content:'123';}
    • E::placeholder        ——设置对象文字占位符的样式。
       input::-webkit-input-placeholder {color: green;}
    • E::selection          ——设置对象被选择时的颜色
      p::-webkit-selection{ background-color: #E13300; color: white; }

         

       

    

上一篇:自定义类型转换器 及 使用 ServletAPI 对象作为方法参数


下一篇:Flink学习笔记:Flink API 通用基本概念