css选择器

0.通配符选择器：*


  说明: 该选择器可以与任何元素匹配


    * {color:red;}

1.标签选择器[元素选择器]:


 说明: 使用元素名来设置样式


div
{ 
    　　color:#ff0000;
}


2.分组选择器：


 说明:逗号分隔的元素都会被设置css样式
div,p,ul,input
　　{
　　     color:#ff0000;
　　}
3.派生选择器[后代选择器]:


说明: 


　　li strong {
　　    font-style: italic;
 　　   font-weight: normal;
　　}
4.子元素选择器，只能选择某元素子元素的元素
    h1 > strong {color:red;}
5.相邻兄弟元素选择器，可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {margin-top:50px;}
6.普通兄弟选择器，匹配的元素在指定元素之后，但不一定相邻
    div~p{color:red}

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;} 
    .important.warning{background:silver;}



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" 的所有元素设置样式，属性与属性值必须完全匹配
　　[title=W3School]
　　{
   　　 border:5px solid blue;
　　}
(4) 部分属性值选择，如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
    属性和值的选择器-多个值: 包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
　　[title~=hello]
{ 
    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>

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

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

    (1) 例如: 
a:link {color: #FF0000}    /* 未访问的链接 */ 
a:visited {color: #00FF00} /* 已访问的链接 */ 
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */ 
a:active {color: #0000FF}  /* 选定的链接 */
      伪类与css类配合使用：
        a.red : visited {color: #FF0000} 
        <a class="red" href="css_syntax.asp">CSS Syntax</a>
    (2) :first-child 伪类
          说明: 选择某元素的第一个子元素
        例如: p:first-child{ color:red; }  第一个规则将作为某元素第一个子元素的所有 p 元素设置为红色字体 ，[是选择某元素的第一个子元素为p元素,如果第一子元素不是p，其他子元素是p元素，也不会选中]

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


           { 


               quotes: "+" "+";


           }
       </style> 
       <p>文字<q >段落中的引用的文字</q>文字</p>
      显示效果: 文字+段落中的引用的文字+文字

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> 元素后面插入一幅图片