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

    css选择器有三个特性:特殊性,继承性,层叠性。

    自己的理解如下:

    特殊性:

    表现在权重上  

    0   0   0   0

    第一个0代表行内元素;

    第二个0代表ID;

    第三个0代表class;

    第四个0代表元素或伪类;

    例子:<p style="color:red;">silence</p> 这个就是1 0 0 0

    #id{color:blue;}这个是0 1 0 0

    .class{color:orange;} 这个是0 0 1 0

    p{color:black;}这个是0 0 0 1

    p#id 0 1 0 1

    p.class 0 0 1 1

    p span 0 0 0 2

     1 <!DOCTYPE html>
     2   <html>
     3   <head>
     4     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
     5   </head>
     6   <style type="text/css">
     7   #dd{color: orange;  }
     8   .text{color: blue;  }
     9   div{color: red;}
    10   div#dd{color:pink;}
    11   </style>
    12  <body>
    13      <div class="text" id="dd">Hi, hi,hi , hi,hihi hi hi,I like him ,he has a history</div>
    14 </body>
    15 </html>

    这个字体的颜色为权重最高的,结果是pink色。

    继承性:

    子元素可以继承父元素的属性,父元素不能继承子元素的属性。

    注意的是:1. html是body的父元素,但可以继承body的属性,这是一个例外,因为body可以看做是根元素;

       2.有些属性是不能继承的。如框模型属性(外内边距,背景,边框)

    层叠性

    !important>行内元素 > <style></style> > 外部引用的css样式

    如果上下都出现同一元素的同一属性,则后出现的优先级高

    p.aa{color:red;}

    p.aa{color:blue;} 则class为aa的p标签里的内容是blue色;

    还有一个是创作人员样式》读者的样式

    p em{color:black;}/*author style*/

    p em{color:blue;}/*reader style*/

    颜色为black

    加重要声明后读者的样式》创作人员的样式

    p em{color:black!important;}/*author style*/

    p em{color:blue!important;}/*reader style*/

    颜色为blue;

    注意的是

    #id的权重为0 1 0 0;

    p[id='']的权重为0 0 1 0;

    a的color会根据浏览器的首选项设置来应用样式;所以有时候a的颜色不能继承父级颜色而是浏览器默认的颜色

    a{color:inherit;}就会继承而不是用户代理的默认样式

  • 相关阅读:
    多线程中lock用法
    跨域使用Proxy page或Cross Frame
    new 操作符所做的事情
    跨域使用js文件
    跨域使用window.name
    TFS 映射错误( is already mapped in workspace)解决办法
    跨域使用JSONP
    jquery加载页面中的部分内容
    CQRS架构案例Tiny Library CQRS详解:AOP拦截与异常处理
    面向领域驱动架构的查询实现方式
  • 原文地址:https://www.cnblogs.com/MissBean/p/4305348.html
Copyright © 2011-2022 走看看