Css选择器

css选择器

id选择器 [#选择器名{...}]

“#”定义 “#”par id=par 不能以数字开头

class选择器（类选择器）[.选择器名{...}]

.定义 .par class=par 不能以数字开头

元素选择器（标签选择器）[选择器名{...}]

所有P标签都是该样式

包含选择器 [A B{...}]A B为标签，下同

  
red text


   
yellow text

div里面的p标签是红色的样式

或[.A B{...}]A是类名，B是标签

    
     
     

        内容为红色
        

          
内容也是红色
       
      

      

所有在first里面的span都是红色样式

子选择器 [A>B{...}]

   
   

     
red text

    

     

      

        
no red text;

       
     
    
   

使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

只有div里面的p是红色样式，嵌套在div里面的table不是红色样式

或.[A>B{...}]A是类名B是标签

     
     
       

         内容为红色
           

             
内容不是红色
           
       

      

使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

兄弟选择器[A~B{...}]

   
    

         
no red text

    
no red text
      
red text

    

只有div和p同时使用时，p内容才是红色样式

通用选择器[*{属性：属性值}]

  
 
 
    
标题为红色
    
段落也为红色
 

相邻选择器[A+B{...}]

   
not red text
   
not red text

red text
not red text

只有邻div的第一个p是红色样式

分组选择器

同样的样式，可以写在一组

    h1{color:red;}
    h2{color:red;}

写成

   h1,h2{color：red}

嵌套选择器

  p{ }: 为所有 p 元素指定一个样式。
  .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

  p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

样式表

在头部插入样式表

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

 hr {color:sienna;}
 p {margin-left:20px;}
 body {background-image:url("/images/back40.gif");}  

内部样式表

写在头部

内联样式

这是一个段落。

样式在元素里使用一次

多重样式

如果同时有外部样式和内部样式

则

颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

优先级

优先级逐级增加的选择器列表：

通用选择器（*）

元素(类型)选择器

类选择器

属性选择器

伪类

ID 选择器

多重样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式