扩展选择器：
            1. 选择所有元素：
                 语法： *{}
            2. 并集选择器：
                 选择器1,选择器2{}
            
            3. 子选择器：筛选选择器1元素下的选择器2元素
                 语法：  选择器1 选择器2{}
            4. 父选择器：筛选选择器2的父元素选择器1
                 语法：  选择器1 > 选择器2{}
            5. 属性选择器：选择元素名称，属性名=属性值的元素
                 语法：  元素名称[属性名=”属性值”]{}

　　　6.伪类选择器：选择一些元素具有的状态
                 语法： 元素:状态{}
                 如： <a>
                     状态：
                         link：初始化的状态
                         visited：被访问过的状态
                         active：正在访问状态
                         hover：鼠标悬浮状态

6种选择器案例演示
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ /*基本选择器*/ color: red; } div{ color: blue; } .class01{ color: chartreuse; } </style> <style> div p{ /*元素选择器*/ color: gray; } div > p { /*累选择器*/ border: 1px solid; } </style> <style> div p{ /*子选择器*/ color: gray; } div > p { /*父选择器*/ border: 1px solid; } input[type='text']{ /*属性选择器*/ border: 5px solid; } /*伪类选择器*/ a:link{ /*初始化的状态*/ color: red; } a:hover{ /*鼠标悬浮状态*/ color: yellow; } a:active{ /*正在访问状态*/ color:blue; } a:visited{ /*被访问过的状态*/ color: green; } </style> </head> <body> <!--用于基本选择器--> <div id ="div1">哈嗨</div> <div>哈嗨</div> <p class="class01"></p> <!--用于扩展选择器--> <div> <p>你好你好</p> </div> <!--用于元素选择器--> <p>我很好你你好嘛</p> <!--用于类选择器--> <p>我很好，你好嘛</p> <!--用于子选择器--> <div> <p>你好你好</p> </div> <!--用于父选择器--> <p>我很好，你好嘛</p> <!--用属性选择器--> <input type="text"> <input type="password"> <br><br><br><br><br> <!--用于伪类选择器--> <a href="#">你好吗</a> </body> </body> </html>

CSS的属性

　　常见属性：

　　　　1.字体、文本

　　　　　　font-sizr:字体大小

　　　　　　color:文本颜色

　　　　　　text-aling:对其方式

　　　　　　line-height:行高

　　　　2.背景

　　　　　　background  

　　　　3.边框

　　　　4.尺寸

　　　　　　width:宽度

　　　　　　height:高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*文本颜色  */
            color: red;
            /*字体大小*/
            font-size: 30px;
            /*对齐方式*/
            text-align: center;
            /*行高*/
            line-height: 100px;
            }
        div{
            /*边框线1px 颜色为红色*/
            border: 1px solid red;
            /*尺寸*/
            height: 450px;
            width: 450px;
            /* 背景导入图片 不重复显示 居中 */
            background:url("img/login_bg.png") no-repeat center;
        }
    </style>
</head>
<body>
    <p>我丢脑瓜子嗡嗡的哦</p>

    <div>
        vwl4ufhdsfgb
    </div>

</body>
</html>

原文地址：http://www.cnblogs.com/agzq/p/16816293.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性