zoukankan      html  css  js  c++  java
  • CSS 选择符 Selectorsd

    1.元素选择符

      1.1通用选择符 *

      * 号表示所有的对象

      所谓通配选择符,就是指可以使用模糊指定的方式来对对象进行选择,指定样式。代码如下:

    *{
      color:red;
      font-size:12px;    
    }

      1.2类型选择符

      指以网页中已有的标签名作为选择符。代码如下:

    body{...}
    
    h1{...}
    
    p{...}

      1.3群组选择符

      除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。如下代码:

    h1,h2,h3,p{
      font-size:12px;
      color:red;    
    }

      1.4ID选择符(E#id)

      在很多方面,ID选择符都类似于类选择符,但也有一些重要的区别:

      1、为标签设置id="ID名称",而不是class="类名称"。

      2、ID选择符的前面是井号(#)号,而不是英文圆点(.)

      3、在网页中,每个id名称中只能使用一次,不得重复。

      代码入戏:

      CSS代码:

    #color{
        color:red;
    }
    p#center{
        text-align:center
    }

      HTML代码:

    <h1 id="color">这里是红色</h1>
    
    <p id="center">这里居中</p>

      1.5类选择符(E.class)

      不同于ID选择符的唯一性,类选择符可以同时定义多个

      注意:

      1、英文圆点开头

      2、其中类选器名称可以任意起名(但不要起中文噢)

      如下代码:

      CSS代码:

    .color{
        color:red;
    }

      HTML代码:

    <span class="color">一胖子穿着红色衣服</span>

    2.关系选择符

    选择符名称版本描述
    E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
    E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。
    E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
    E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。

      2.1包含选择符(E F)

      语法:E>F { sRules }

      说明:选择所有作为E元素的子元素F。与包含选择符不同的是,子选择符只能命中子辈元素,而不能命中孙辈。

      如下代码:

      CSS代码:

    ul li{
        color:red;
    }

      HTML代码:

    <ul>
        <li>AAA<li>
        <li>AAA<li>
        <li>AAA<li>
    </ul>

      2.2子选择符(E>F)

      语法:E>F { sRules }

      说明:选择所有作为E元素的子元素F。与包含选择符不同的是,子选择符只能命中子辈元素,而不能命中孙辈。

      代码如下:

      CSS代码:

    .demo>div{
        border:1px solid red;
    }

      HTML代码:

    <div class="demo">
        <div>这里有边框
            <div>没有边框</div>
            <div>没有边框</div>
            <div>没有边框</div>
        </div>
    </div>

      请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代
    元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

      总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

      2.3相邻选择符(E+F)

      语法:E+F { sRules }

      说明:选择紧贴在E元素之后F元素。与兄弟选择符不同的是,相邻选择符只会命中符合条件的相邻的兄弟元素。

      如下代码:

      CSS代码:

    p+p{color:red;}

      HTML代码:

    <div>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <p>这是一个文字段落</p>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <p>这是一个文字段落</p>
    </div>

      2.4兄弟选择符(E~F)

      语法:E~F { sRules }

      说明:选择E元素后面的所有兄弟元素F。与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。

      如下代码:

      CSS代码:

    p~p{color:red;}

      HTML代码:

    <div>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <p>这是一个文字段落</p>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <h3>这是一个标题</h3>
        <p>这是一个文字段落</p>
        <p>这是一个文字段落</p>
    </div>

    3.伪类选择符

      

    选择符版本描述
    E:link CSS1 设置超链接a在未被访问前的样式。
    E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式。
    E:hover CSS1/2 设置元素在其鼠标悬停时的样式。
    E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
    E:focus CSS1/2 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
    E:lang(fr) CSS2 匹配使用特殊语言的E元素。
    E:not(s) CSS3 匹配不含有s选择符的元素E。
    E:root CSS3 匹配E元素在文档的根元素。
    E:first-child CSS2 匹配父元素的第一个子元素E。
    E:last-child CSS3 匹配父元素的最后一个子元素E。
    E:only-child CSS3 匹配父元素仅有的一个子元素E。
    E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
    E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
    E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。
    E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。
    E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。
    E:nth-of-type(n) CSS3 匹配同类型中的第n个同级兄弟元素E。
    E:nth-last-of-type(n) CSS3 匹配同类型中的倒数第n个同级兄弟元素E。
    E:empty CSS3 匹配没有任何子元素(包括text节点)的元素E。
    E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
    E:enabled CSS3 匹配用户界面上处于可用状态的元素E。
    E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。
    E:target CSS3 匹配相关URL指向的E元素。
    @page:first CSS2 设置页面容器第一页使用的样式。仅用于@page规则
    @page:left CSS2 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
    @page:right CSS2 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

    4.属性选择符

    选择符版本描述
    E[att] CSS2 选择具有att属性的E元素。
    E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。
    E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
    E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
    E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
    E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
    E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。

    参考手册(点击)

     

  • 相关阅读:
    MySQL Unable to convert MySQL datetime value to System.DateTime 解决方案
    Zend 无限试用
    SQL 触发器
    C# 多线程示例
    JS 实现打印
    apache开启.htaccess
    MySQL 安装包下载教程
    js系列(10)js的运用(二)
    js系列(9)js的运用(一)
    js系列(8)简介
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5754919.html
Copyright © 2011-2022 走看看