zoukankan      html  css  js  c++  java
  • CSS选择器

    CSS选择器的使用是否合理,会直接影响CSS代码的精简程度和执行效率,所有合理驾驭CSS选择器,才能写出高质量的CSS代码。CSS选择器最基本的有五种:

    标签选择器、ID选择器、类选择器、通用选择器、伪类选择器。

    标签选择器(div、p....):方便,但是不够灵活。用法如下:

    body {margin:0; padding:0;}

    ID选择器(#):ID调用,具有唯一性,不重复,针对性较强。用法如下:

    #one { padding:0;}                                      

    通用选择器(*):对整个网页中所有HTML标签进行样式定,覆盖的对象更加广泛,是整个HTML的所有标签,功能是强大,但是这样反而限制了它的灵活性,主要应用于标签重置。用法如下:

    *{margin:0; padding:0;}

    类选择器(.):和ID选择器的用法类似,只不过把id换做class。用法如下:

    .one {padding:0;}

    伪类选择器(:link 、:visited  、:hover 、:active ):主要是对A标签定义。IE6除外,对其他浏览器其他标签也可以使用。用法如下:

    a:link {color: #FF0000} /* 未访问的链接 */

    a:visited {color: #00FF00} /* 已访问的链接 */

    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

    a:active {color: #0000FF} /* 选定的链接 */

    补充:一个标签可以有多个类选择器的值,不同的值用空格分开,如:

    <div class="one yellow left">一个标签可以有多个类选择器的值</div>

    这样我们可以将多个样式用到同一个标签中,当然也可以,ID和class一块用

    <div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>

    选择器的集体声明

    标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:

    h1,h2,h3,h4,h5,h6{color:#900;}

    #header,div,.blue,h1{font-size:14px;}

    选择器的嵌套

    选择器也是可以嵌套的,用空格分开,如:

    #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

    #div1 .thep a {color:#900;}/*意思是ID为div1内的.thep类下的a标签的文字颜色为红色*/

    div p a {color:#900;}/*意思是div内的p下内的a标签的文字颜色为红色*/

    p .content {color:#900;}/*是选择器的嵌套,用来指定页面内P标签且内部类选择器为content的标签内的文字颜色为红色*/

    p.content {color:#900;}/*是指定选择符,用来指定页面内某个类选择器为content的P标签内的文字颜色为红色*/(特殊用法:指定选择符

  • 相关阅读:
    oracle 第12章 归档日志文件
    oracle 第09章 参数文件
    oracle 第11章 重做日志文件
    oracle 第10章 控制文件
    oracle 第14章 表空间管理
    linux yum源配置
    oracle 第08章 用户、权限、角色管理
    oracle 第07章 网络配置管理
    第二阶段冲刺-06
    第二阶段冲刺-05
  • 原文地址:https://www.cnblogs.com/seostyle/p/4951697.html
Copyright © 2011-2022 走看看