css基础学习总结(一)

一. 选择器

1. 标签选择器

选择器	例子	描述
element	p/div/span	选择所有含有指定标签的元素

   
   
   
   


   
Hello
   World
   
你好

2. 类选择器

选择器	例子	描述
.class	.info	选择 class=“info” 的所有元素

    
    
    
    


    
"info">Hello
    
"a">World
    
"b">你好

3. ID选择器

选择器	例子	描述
#id	#Oh	选择 id=“Oh” 的元素

   
   
   
   


   
"info" id="o1">Hello
   
"a" id="Oh">World
   
"b" id="o2">你好

4. 分组选择器

选择器	例子	描述
element,element	div, p	选择所有div元素和所有p元素

   
   
   
   


   
"info" id="o1">Hello
   
"a" id="Oh">World
   "b" id="o2">你好

5. 派生与子元素选择器

选择器	例子	描述
element element.class	ul li.name	选择所有具备当前祖辈容器为li,且li的祖辈容器必须为ul,且需要引入name类

   
   
   
   


   

       
Hello
       
World
       
"name">你好
   

选择器	例子	描述
element>element	ul > li	选择父元素是 ul 的所有 li 元素

   
   
   
   


   

       
Hello
       

           
World
       
       
"name">你好
   

6. 属性选择器

选择器	例子	描述
[attribute]	[target]	选择带有 target 属性的所有元素

   
   
   
   


   

       
Hello
       

           
"世界">World
       
       
"name">你好
   

7. 伪类选择器

选择器	例子	描述
:active	a:active	选择活动链接。
:checked	input:checked	选择每个被选中的 input 元素。
:default	input:default	选择默认的 input 元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 input 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 p 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:visited	a:visited	选择所有已访问的链接。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素。

8. 伪对象选择器

选择器	例子	描述
::after	p::after	在每个p的内容之后插入内容。
::before	p::before	在每个 p 的内容之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个 p 元素的首行。

9. 选择器的优先级别

行内样式（style=“…”）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})

css优先级 的 6大分类

通常可以将css的优先级由高到低分为6组：

1. 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

2. 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

3. 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}

4. 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

5. 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

6. 第六优先级：通配选择器，如*{marigin:6px;}