• CSS选择器


    几种选择器:3种,标签名选择器,clsss选择器,id选择器。

    对于同样的CSS属性,选择器优先级是,id选择器>class选择器>标签名选择器。class+标签名选择器>class选择器。

    对于不同的CSS属性,继承。上面优先级反走。


    请看例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS的基本选择器</title>
    </head>
    <style type="text/css">
    h1
    {color:blue; font-size:25px; text-decoration:underline;}
    em
    { color:red;}

    .red
    { color:red; font-size:18px;}

    #one
    { font-weight:bold; font-size:36px;}
    .two
    { font-weight:lighter; font-size:13px;}

    p span
    { color:#00FF00;}
    p
    {font-weight:normal; font-size:55px;}

    .father div
    { background-color:red;
    }
    .son
    {
    background-color
    :blue;

    }
    </style>

    <body>
    <h1>标签名选择器</h1>
    <class="red">class选择器</p>
    <class="red">还是class选择器</p>
    <id="one">id选择器</p>
    <p><span>嵌套选择器</span></p>
    <h1><em>嵌套选择有继承特性</em></h1>
    <id="one" style=" font-weight:lighter; font-size:13px">行内样式>ID选择器</p>
    <id="one" class="two">ID选择器>class选择器</p>
    <class="two">class选择器>标签名选择器</p>

    <div class="father">背景色为red
    <div class="son">class+标签名选择器>class选择器</div>
    </div>

    </body>
    </html>


    合乎自然而生生不息。。。
  • 相关阅读:
    Centos7更改网卡名为eth0
    Centos7部署Open-Falcon监控
    centos6.x一键15项系统优化(转自努力哥)
    运维题目(十三)
    运维题目(十二)
    Mongodb的学习整理(下)
    Centos7下yum安装mongodb
    浏览器缓存
    控制反转
    js setTimeOut()
  • 原文地址:https://www.cnblogs.com/samwu/p/2018287.html
Copyright © 2020-2023  润新知