CSS学习之选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS之选择器</title>
        <style>
            /* body {
                font-size: 16px;
            } */
            
            
            /* 后代选择器选择后面的全部 */
            /* div strong {
                color: #FF0000;
            } */
           
           /* 子元素选择器。只显示直属的 */
            div>strong {
                color: #FF0000;
            }
            
            /* 交集选择器。即是**关系,又是**关系; */
            p.red{
                color: red;
            }
            
            /*并集选择器 逗号是和的意思*/
            p,div,.red{
                color: #FF0000;
            }
            
            <!-- 链接伪类选择器 -->
            /* 加了:都是伪类 */
            
            /* 未访问过的状态 */
            a:link{
                color: #FF0000;
                text-decoration: none;
            }
            /* 已经访问过的状态 */
            a:visited{
                color: #FF0000;
                text-decoration: none;
            }
            /* 鼠标经过连接时候的状态 */
            a:hover{
                color: aqua;
                text-decoration: none;
            }
            /* 当我们点击的时候（按下鼠标。 点击的时候） */
            a:active{
                color: gold;
            }
            
            .nav a{
                color: #00FFFF;
                text-decoration: none;
            }
            .nav a:hover{
                color: #FFD700;
            }
        </style>
    </head>
    <body>
        <div>
            <strong>儿子</strong>
            <strong>儿子</strong>
            <strong>儿子</strong>
        </div>
        <div>
            <p>
                <strong>孙子</strong>
                <strong>孙子</strong>
                <strong>孙子</strong>
            </p>
        </div>
        
        <p class="red">红色</p>
        <p class="red">红色</p>
        <p class="red">红色</p>
        <div class="red">红色</div>
        <div class="red">红色</div>
        <div class="red">红色</div>
        
        <!-- 链接伪类选择器 -->
        <a href="http://www.xiaomi.com">小米手机</a>
        
        <div class="nav">
            <a href="#">DIV里面的a标签</a>
        </div>
         <!-- 块级元素(h1 div ul li)-->
         <!-- 特点：
         自己独站一行
         高度 宽度 外边距离以及内边距都可以控制
         宽度默认是容器的100%。（父级容器的宽度）
         div是一个容器及盒子。里面可以放行内或者快级元素 -->
         <!-- p标签里面不能包含div.段里面尽量不要放块级元素 -->
         
        <!-- 行内元素(span a strong )
         相邻的元素是可以一行放多个。
         高宽是无效的
         默认的宽度就是他自己本身内容的宽度
         行内元素只能容纳文本和其它的行内元素
         细节：a连接里面不能再放连接 -->
         
         
<!--          行内块元素(img input td)
         和相邻的行内元素在一行上。但是之前会有空白缝隙。一行可以显示多个
         默认宽度就是它本身内容的宽度
         宽度,行高,内外边距都是可以控制 -->
         
         <!-- 标签显示模式转换:display
         块转行内元素：display:inline;
         行内转块:display:block;
         块，行内元素转换为行内块:display:inline-block; -->
         
    </body>
</html>

 

posted @ 2021-07-09 10:09  王彬-效率开发  阅读(46)  评论(0)    收藏  举报