首页 > 代码库 > css 选择器

css 选择器

css选择有十种方式:元素选择器、类选择器、ID选择器、选择器分组、属性选择器、子元素选择器、后代选择器、相邻兄弟元素选择器、伪元素、伪类。

  1. 元素选择器。文档的元素就是最基本的选择器。如:html {color:black;}、note{font-family:Verdana, Arial;}(xml)。
  2. 选择器分组。结合选择器和声明的分组:h1, h2, h3, h4, h5, h6 {color:gray;background: white;padding: 10px; border: 1px solid black;font-family: Verdana;};通配符选择器:* {color:red;}
  3. 类选择器。允许以一种独立于文档元素的方式来指定样式。如:修改html代码:<h1 class="important">; 语法:.important {color:red;};结合元素选择器:h1.important {color:blue;}; css多类选择器:.important.warning {background:silver;},通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
  4. ID选择器。允许以一种独立于文档元素的方式来指定样式。如:<p id="intro"> #intro {font-weight:bold;}。只能在文档中出现一次,不能使用ID词列表,ID能包含更多含义。
  5. 属性选择器。可以根据元素的属性及属性值来选择元素。

    简单属性选择:选择有某个属性的元素,而不论属性值是什么。如:*[title] {color:red;} ; a[href] {color:red;} ;a[href][title] {color:red;}(同时有 href 和 title 属性);

          根据具体属性值选择:可以进一步缩小选择范围,只选择有特定属性值的元素。如:a[href="http://www.baidu.com"] {color: red;};

    a[href="http://www.baidu.com"][title="W3School"] {color: red;}(同时具备)

          属性与属性值必须完全匹配:这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表,匹配就可能出问题。p[class="important warning"] {color: red;}

          根据部分属性值选择:如果需要根据属性值中的词列表的某个进行选择,则需要使用波浪号(~)。如:p[class~="important"] {color: red;}。(部分值属性选择器与点号类名记法的区别在于,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片,img[title~="Figure"] {border: 1px solid gray;})

            <img title="Figure 1" src="http://www.mamicode.com/i/figure-1.gif" />
              <img title="Figure 2" src="http://www.mamicode.com/i/figure-2.gif" />

          子串匹配属性选择器:

    类型描述
    [abc^="def"]选择 abc 属性值以 "def" 开头的所有元素
    [abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素
    [abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

         特定属性选择类型:会选择 lang 属性等于 en 或以 en- 开头的所有元素。如:*[lang|="en"] {color: red;};

              <p lang="en">Hello!</p>          <p lang="en-us">Greetings!</p>          <p lang="en-au">G‘day!</p>          <p lang="fr">Bonjour!</p>          <p lang="cy-en">Jrooana!</p>

         总结:

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

 

 

      

  
  
  
  
  
  
  
  

 

 

  1. 后代选择器。
  2. 子元素选择器。
  3. 相邻兄弟元素选择器。
  4. 伪元素。
  5. 伪类。

 

css 选择器