zoukankan      html  css  js  c++  java
  • 设计中最常用的CSS选择器

    一、标签选择器:
    顾名思议,标签选择器是直接将HTML标签作为选择器,如p、h1、dl、strong等HTML标签。

    如:

    p { font:12px;}
    em { color:blue;}
    dl { float:left; margin-top:10px;}

                

           

    二、id选择器:
    我们通常给页面元素定义id。
    如<div id="menubar"></div>,然后在样式表里这样定义:
    #menubar {
    margin:0 auto;
    background:#ccc;
    color:#c00;
    }
    其中"menubar"是自己定义的id名称。注意在前面加"#"号。
    id选择器也同样支持后代选择器,
    例如:
    #menubar p {
    text-align:center;
    line-height:20px;
    }
    这个方法主要用来定义层和那些比较复杂,有多个“唯一后代”的元素。

            

               

    三、类(class)选择器:
    在CSS里用一个点开头表示类别选择器
    例如:
    .mainContent {
    color:#f60;
    font-size:14px ;
    }
    在页面中,用class="类别名"的方法调用: <span class="mainContent">14px大小的字体</span>这个方法比较简单灵活,
    可以随时根据页面需要新建和删除。但需要避免多class综合症。

              

                

    四、群组选择器:
    当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。
    如:
    p, td, li {
    line-height:20px;
    color:#c00;
    }
    #main p, #sider span {
    color:#000;
    line-height:26px;
    }
    使用组群选择器,将会大大的减化CSS代码,将具有多个相同属性的元素,合并群组进行选择,
    定义同样的CSS属性,这大大的提高了编码效率与CSS文件体积。 

              

                

    五、后代选择器:
    后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式,

    例如:

    li strong {
    font-style:italic;
    font-weight:800;
    color:#f00;
    }

    #mainContent p {
    color:#000;
    line-height:26px;
    }          

           

           

    六、通用选择器:

    通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。

    例如:可以使用以下规则删除每个元素上默认的浏览器填充和空白处:

    * {

    padding: 0;

    margin: 0;

    }

             

    CSS中用四个伪类来定义链接的样式,分别为a:link、a:visited、a:hover和a:active。
    例如:
    a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
    a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
    a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
    a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
    以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
    注意,必须按以上顺序写,否则显示可能和你预期的不一致。记住它们的顺序是“LVHA”。

  • 相关阅读:
    今天面试一些程序员(新,老)手的体会
    UVA 10635 Prince and Princess
    poj 2240 Arbitrage
    poj 2253 Frogger
    poj 2485 Highways
    UVA 11258 String Partition
    UVA 11151 Longest Palindrome
    poj 1125 Stockbroker Grapevine
    poj 1789 Truck History
    poj 3259 Wormholes
  • 原文地址:https://www.cnblogs.com/huangf714/p/5826854.html
Copyright © 2011-2022 走看看