zoukankan      html  css  js  c++  java
  • CSS基础知识点(二)——选择器

    在这一篇中,主要总结一下CSS中的选择器。

    参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html

     

    CSS中的选择器主要包括:

    • 派生选择器:通过依据元素在其位置的上下文关系来定义样式。包括后代选择器,子元素选择器,相邻兄弟选择器。
    • id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。
    • 类选择器:可以为class的 HTML 元素指定特定的样式。
    • 属性选择器:为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    (1) 选择器分组:可以将任意多个选择器分组在一起,中间以 ',' 隔开。

      例:body, h2, p, table, th, td, pre, strong, em { color : gray ; }

    (2) 类选择器的几种用法

    • 与元素选择器结合:

       例:p.important {color:red;}

        匹配 class为 important 的所有 p 元素,但是其他任何类型的元素都不匹配。

    • 多类选择器:(IE7之前不支持)

       例:.important.warning {background:silver;}

        匹配同时具有这两个class的元素。

    (3) 属性选择器:根据元素的属性匹配元素

    • 简单属性选择

        例:a[title] {color:red;}  只对有 title 属性的 a 元素应用样式。

    • 根据具体属性值选择

        例:input[name='basketball'] 只选择有特定属性值的元素。

    • 属性与属性值完全匹配

       例:对于<p class="important warning">This paragraph is a very important warning.</p>,

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

    • 根据部分属性值匹配

       例:对于<p class="important warning">This paragraph is a very important warning.</p>,

         使用 p[class~="important"] {color: red;} 根据属性值中的词列表的某个词进行选择。

    • 子串匹配属性选择器

        input[name^='foot']:匹配给定的属性是以某些值开始的元素。

        input[name$='ball']:匹配给定的属性是以某些值结尾的元素。

        input[name*='sket']:匹配给定的属性是以包含某些值的元素。

    (4) 后代选择器

      例:h1 em {color:red;},匹配h1后代中所有em

      例:h1 > strong {color:red;},选择只作为 h1 元素(一级)子元素的 strong 元素。

    (5) 相邻兄弟选择器

         例:h1 + p {margin-top:50px;},匹配相同父元素下,h1之后出现的第一个p元素。

    (6)同级选择器

      例:h1 ~ p {margin-top:50px;},匹配相同父元素下,h1之后出现的所有p元素。

    (7) 伪类

       如a链接的 :visited, :hover等,input的:focus, :checked, :disabled 等,

      结构性伪类有  :first-child, :first-of-type, :nth-of-type,  nth-child, :before, :after 等。

      nth-child与nth-of-type的区别:

    • nth-child 指的是后代的所有元素
    • nth-of-type 指的是指定某种类型的后代元素

      例如:

    p:nth-child(2) { color: red; }  效果为第一个 p 变红色。要找的是:第二个子元素&&第二个子元素为p。当不满足任一条件时,失败。
    p:nth-of-type(2) { color: red; } 效果为第二个 p 变红色(希望的效果)。因为找的是所有p标签中的第二个p。    
    p:nth-child(2) { color: red; }  不会染红任何元素。

       p:nth-of-type(2) { color: red; }  效果为第二个 p 变红色(希望的效果)

    (8) 伪元素

      如 p:first-line;匹配元素p内容的第一行。p:first-letter;匹配p元素内容的首字母。还有before,after等。

       使用伪元素/伪类设置placeholder的样式:

      input::-webkit-input-placeholder { /* WebKit browsers */  

      }  

      input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  

      }  

      input::-moz-placeholder { /* Mozilla Firefox 19+ */  

      }  

      input:-ms-input-placeholder { /* Internet Explorer 10+ */  

      }  

     

  • 相关阅读:
    C# 轻松读取、改变文件的创建、修改、访问时间 z
    C#中将dll汇入exe z
    ASP.NET中引用dll“找不到指定模块"的完美解决办法 z
    C# 调用第三方DLL z
    [ACM_贪心] Radar Installation
    Beauty Contest
    [ACM_几何] Wall
    [ACM_几何] Pipe
    [ACM_几何] Fishnet
    [ACM_动态规划] 找零种类
  • 原文地址:https://www.cnblogs.com/telnetzhang/p/5551461.html
Copyright © 2011-2022 走看看