zoukankan      html  css  js  c++  java
  • CSS系列------选择器和选择器的优先级

    1.1.基本选择器

    • 通配符选择器(*)
            通配符选择器的使用方法如下
      *{margin:0px; padding:0px;} //*代表所有的

    • ID选择器(#)
        
      ID选择器的使用方式如下:
      *#intro {font-weight:bold;}//也可以省略通配符 
       #intro{font-weight:bold;} //两种方式是一样的。

       
       不同于其他选择器,id选择器有以下特点
       规范: 同一个id,在一个网页中只能标注一个元素。
        如果有同名id ,则在CSS中用ID选择器时,依旧会匹配所有的同名id元素。只是这么使用的时候会有以下的弊端:
                    1.不符合规范,因为规范要求的是一个id只能被一个元素使用。
                    2.语义的二义性。一般id我们都是作为标示符使用的,一个id只能用来标注一个元素。
                    3.在JS DOM(getElementById)操作或者是jquery("#xx")选择页面中元素时,返回的仅是第一个被找到的素。

    • 类选择器(.)
          类选择器使用比较简单,使用方式如下:

      *.important {color:red;}   //第一种使用方式
       .important {color:red;}  //第二种使用方式,推荐第二种
    • 属性选择器([])
       
           属性选择器用来选择指定属性的 HTML 元素。使用方式如下:
      [title]{ color:red; }  //为带有 title 属性的所有元素设置样式:
      
      [title~=hello] { color:red; }//为包含指定值的 title 属性的所有元素设置样式

      属性选择器一览表
      选择器描述
      [attribute] 用于选取带有指定属性的元素。
      [attribute=value] 用于选取带有指定属性和值的元素。
      [attribute~=value] 用于选取属性值中包含指定词汇的元素。
      [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
      [attribute^=value] 匹配属性值以指定值开头的每个元素。
      [attribute$=value] 匹配属性值以指定值结尾的每个元素。
      [attribute*=value] 匹配属性值中包含指定值的每个元素。

       ========================================================================================================================
         在属性选择器中 [attribute~=value] 与 [attribute*=value] , [attribute|=value] 与 [attribute^=value] 的用法 在描述上很相似,很容易混淆:
      <img title="hello world"/>

      对于以上的元素  [title~=hello],[title*=hello]均能匹配,但是 [title~=hell]不能匹配,而[title*=hell]可以匹配,

      因为[attribute~=value] 匹配时要求value是一个“单词”,而 [attribute*=value]匹配时,是以正则表达式规则进行匹配
      
      
      同理,也可以类推出 [attribute|=value] 与 [attribute^=value]也是已类似的规则匹配,前者要求是以单词开头,而后者仅仅要求以xxxxx字符串开头即可.

      注: 这里所说的单词,并不是我们严格意义上的单词,比如 asdasd wasdas, 这里 asdasd wasdas对于计算机来说就是两个单词。但是as@re# 这种含有特殊字符的对于计算机来说就不是单词。
    • 伪类选择器(:)

          CSS2规则中所允许使用的伪类选择器
      
      
      CSS3中伪类选择器使用以及各浏览器的支持情况
      属性描述CSS
      :active 向被激活的元素添加样式。 1
      :focus 向拥有键盘输入焦点的元素添加样式。 2
      :hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
      :link 向未被访问的链接添加样式。 1
      :visited 向已被访问的链接添加样式。 1
      :first-child 向元素的第一个子元素添加样式。 2
      :lang 向带有指定 lang 属性的元素添加样式。 2
       









      ===========================================================================================================

      常见的CSS3的规则
      属性描述CSS
      :nth-child() 匹配父元素的第n个子元素 3
      :nth-of-type() 匹配某父元素下第几个某一个类型的元素 3
      :empty { sRules } 匹配没有任何子元素(包括text节点)的元素 3
      :checked { sRules } 匹配用户界面上处于选中状态的元素

      (用于input type为radio与checkbox时)
      3
      
            
       





      CSS3的这些规则大部分在IE--8中都是不能使用的,  关于CSS3的一些伪类选择器及其使用,详细请见CSS参考手册
    • 伪元素选择器(:或者::)
       

       常见的伪元素选择器如下:

      选择符版本描述
      :first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
      :first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
      :before/E::before CSS2/3 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
      :after/E::after CSS2/3 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
      ::placeholder CSS3 设置对象文字占位符的样式。
      ::selection CSS3 设置对象被选择时的颜色。

        CSS3推荐使用::写法,用以区分伪类选择器和伪元素选择器,但是使用:写法依旧有效。

        但是在使用:first-letter/E::first-letter时,IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨    着,需留有空格或换行。

    2.基本选择器的组合

       基本选择器组合结果的复杂选择器无外乎以下几种:兄弟选择器,子选择器,后代选择器,组合选择器,群组选择器。

    •  兄弟选择器(+)

           兄弟选择器又称邻近选择器,选择邻近的元素.使用方式如下:
      selector1+selector2{
      } //由两个基本选择器,==》组合选择器

    • 子选择器(>)

         选择器,选择的是直接后代中所有符合条件的元素。

           selector1>selector2{
            color:red;
            }
    • 后代选择器(空格)

        后代选择器,选择的是子孙后代中所有符合条件的元素
      使用方式:
      
      selector1 selector2{
        color:red;
      }  //A B是基本选择器
    • 组合选择器()

           组合选择器,是两个基本选择器同时使用的情况,匹配需同时满足多个基本选择器
      使用方式如下:
      
      selector1selector2{
      color:red;
      }
        
    • 群组选择器(,)

           群组选择器:选择器同时使用时,多个选择器之间是相互独立的
    • selector1,selector2{
      
      } //第一种
      =========================
      ========================= 两种使用方式,效果是一样的,只是第一种有利于代码的复用。
      selector1{
      
      }
      selector2{
      
      } //第二种       

    ==================================================================

    ==================================================================、

    =====================================未完待续....下一篇,各类选择器的优先级

     

    本篇中只是大致叙述了一下,CSS选择器的种类,讲的也比较浅显---如果详细学习,推荐

    http://www.css88.com/book/css/selectors/pseudo-classes/index.htm...

     

     

  • 相关阅读:
    P3157 [CQOI2011]动态逆序对
    P2468 [SDOI2010]粟粟的书架
    P2564 [SCOI2009]生日礼物
    P2698 [USACO12MAR]花盆Flowerpot
    【2018 Multi-University Training Contest 6】
    【HDOJ6351】Beautiful Now(贪心,搜索)
    【HDOJ6354】Everything Has Changed(计算几何)
    【2018 Multi-University Training Contest 5】
    【HDOJ6319】Ascending Rating(单调队列)
    【Educational Codeforces Round 48】
  • 原文地址:https://www.cnblogs.com/renlong0602/p/4422615.html
Copyright © 2011-2022 走看看