css选择器

 

0.通配符选择器：*
   说明: 该选择器能够与任何元素匹配
    * {color:red;}

1.标签选择器[元素选择器]:
  说明: 使用元素名来设置样式
 div
　　{ 
    　　color:#ff0000;
　　}


2.分组选择器：
  说明:逗号分隔的元素都会被设置css样式
　　div,p,ul,input
　　{
　　     color:#ff0000;
　　}


3.派生选择器[后代选择器]:
 说明: 
 {
　　    font-style: italic;
 　　   font-weight: normal;
　　}


4.子元素选择器，只能选择某元素子元素的元素
    h1 > strong {color:red;}


5.相邻兄弟元素选择器，可选择紧接在另外一元素后的元素，且两者有相同父元素
　　h1 + p {margin-top:50px;}


6.普通兄弟选择器，匹配的元素在指定元素以后，但不必定相邻
    div~p{color:red}

　　li strong

7.id选择器：已#来定义
 说明: 使用元素中定义的id属性值来设置样式
　　#id_name
　　{
　　    color:#ff0000;
　　}
　　#id_name div
　　{
　　    color:#ff0000;
　　}
　　div #id_name
　　{
　　    color:#ff0000;
　　}

8.类选择器：用.来显示
 说明: 使用元素中定义的class的类名来设置样式
　　.class_name
　　{
　　    color:#ff0000;
　　}
　　
   (1) 选择器如今会匹配 class 属性包含 class_name 的全部 p 元素，可是其余任何类型的元素都不匹配，不管是否有此 class 属性
   p.class_name
   {
       color:#ff0000;
   }
   
   (2) 多类选择器
         两个类选择器连接在一块儿，仅能够选择同事包含这些类名的元素（类名的顺序不限）
    <p class="important warning"> This paragraph is a very important warning. </p>
 .important {font-weight:bold;} 
 .warning {font-style:italic;} 
 .

9.属性选择器: 能够为拥有指定属性的 HTML 元素设置样式，而不只限于 class 和 id 属性
    注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
　　自定义属性也能够设置。

　　(1) 为带有 title 属性的全部元素设置样式：
　　[title]
　　{
　　    color:#ff0000;
　　}
   
   (2) 多个属性选择器，只需将属性选择器连接在一块儿便可
     例如，为了将同时有 href 和 title 属性的 HTML 超连接的文本设置为红色，能够这样写：
    a[href][title] 
    {
        color:red;
    }

　　(3) 为 title="W3School" 的全部元素设置样式，属性与属性值必须彻底匹配

　　{
   　　 border:5px solid blue;
　　}

　　(4) 部分属性值选择，若是须要根据属性值中的词列表的某个词进行选择，则须要使用波浪号（~）
    属性和值的选择器-多个值: 包含指定值的 title 属性的全部元素设置样式。适用于由空格分隔的属性值
 
　　{ 
　　    color:red; 
　　}
　　<h2 title="hello world">Hello world</h2>
　　<p title="student hello">Hello W3School students!</h1>
　　<h2 title="world" val='hello'>Hello world</h2>
　　<p title="student">Hello W3School students!</p>important.warning{background:silver;}
　　[title=W3School]　　[title~=hello]

　　(5)为带有包含指定值的 lang 属性的全部元素设置样式。适用于由连字符分隔的属性值
　　[lang|=en] 
　　{
　　   color:red; 
　　}
　　<p lang="en">Hello!</p> 
　　<p lang="en-us">Hi!</p> 
　　<p lang="us">Hi!</p>
　　<p lang="zh">Hao!</p>

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

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

10.伪类选择器：
    语法： selector : pseudo-class {property: value}  或者css类与伪类选择器搭配  selector.class : pseudo-class {property: value}

    (1) 例如: 
         {color: #FF0000}    /* 未访问的连接 */ 
　　　　  {color: #00FF00} /* 已访问的连接 */ 
　　　　  {color: #FF00FF}   /* 鼠标移动到连接上 */ 
         {color: #0000FF}  /* 选定的连接 */
    
      伪类与css类配合使用：
        a : visited {color: #FF0000} 
        <a class="" href="css_syntax.asp">CSS Syntax</a>
    

    (2) :first-child 伪类
          说明: 选择某元素的第一个子元素
        例如: p:first-child{ color:red; }  第一个规则将做为某元素第一个子元素的全部 p 元素设置为红色字体 ，[是选择某元素的第一个子元素为p元素,若是第一子元素不是p，其余子元素是p元素，也不会选中]a:linka:visiteda:hovera:active.redred

    (3) :lang 伪类使你有能力为不一样的语言定义特殊的规则。 简单理解就是在元素所在的范围加上指定的字符，相似插入字符功能。
　　　　<style type="text/css"> 
           
       </style> 
       <p>文字<q >段落中的引用的文字</q>文字</p>

      显示效果: 文字+段落中的引用的文字+文字q:lang(no) 
 { 
 quotes: "+" "+";
 }lang="no"

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的连接添加样式。	1
:visited	向已被访问的连接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。

  11.伪元素选择器
      (1) :first-line 伪元素，  用于向文本的首行设置特殊样式
　　　　　　　　注释：":first-line" 伪元素只能用于块级元素。

        例如: p:first-line { color:#ff0000; }   只会将p元素第一行文本设置样式

    (2) :first-letter 伪元素，用于向文本的首字母设置样式
        例如: p:first-letter {color:#ff0000;}   只会将p元素的首字母设置样式

    (3) :before 伪元素，能够在元素的内容前面插入新内容
        例如: h1:before { content:url(logo.gif); }  在每一个 <h1> 元素前面插入一幅图片

    (4) :after 伪元素， 能够在元素的内容以后插入新内容
        例如: h1:after { content:url(logo.gif); }   在每一个 <h1> 元素后面插入一幅图片

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素以前添加内容。	2
:after	在元素以后添加内容。	2