• 属性选择器 伪类选择器 伪元素选择器 浮动


    04-属性选择器

    属性选择器,字面意思就是根据标签中的属性,选中当前的标签。

    语法:

     1 /*根据属性查找*/
     2             /*[for]{
     3                 color: red;
     4             }*/
     5             
     6             /*找到for属性的等于username的元素 字体颜色设为红色*/
     7             /*[for='username']{
     8                 color: yellow;
     9             }*/
    10             
    11             /*以....开头  ^*/ 
    12             /*[for^='user']{
    13                 color: #008000;
    14             }*/
    15             
    16             /*以....结尾   $*/
    17             /*[for$='vvip']{
    18                 color: red;
    19             }*/
    20             
    21             /*包含某元素的标签*/
    22             /*[for*="vip"]{
    23                 color: #00BFFF;
    24             }*/
    25             
    26             /**/
    27             
    28             /*指定单词的属性*/
    29             label[for~='user1']{
    30                 color: red;
    31             }
    32             
    33             input[type='text']{
    34                 background: red;
    35             }

    05-伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
            /*奇技淫巧*/
            /*伪类选择器*/
            
            /*a标签 要遵循 爱恨准则 LoVe HAte*/
            /*.box ul li a:link{
                color: green;
            }*/
            /*访问过后显示的样式*/
            /*.box ul li a:visited{
                color: yellow;
            }*/
    
            /*鼠标的悬浮显示的样式*/
            .box ul li a:hover{
                color: yellow;
            }
            /*摁住的时候显示的样式*/
            /*.box ul li a:active{
                color: yellowgreen;
            }*/
            /*button:link{
                background-color: red;
            }*/
        
            p:hover{
                color: yellow;
            }
    
    
        </style>
    </head>
    <body>
        <p>哈哈哈</p>
        <button>提交</button>
    
        <div class="box">
            <ul>
                <li>
                    <a href="#">百度一下</a>
                </li>
            </ul>
        </div>
        
    </body>
    </html>
    伪类选择器

    伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则"  LoVe HAte

    1               /*没有被访问的a标签的样式*/
     2         .box ul li.item1 a:link{
     3             
     4             color: #666;
     5         }
     6         /*访问过后的a标签的样式*/
     7         .box ul li.item2 a:visited{
     8             
     9             color: yellow;
    10         }
    11         /*鼠标悬停时a标签的样式*/
    12         .box ul li.item3 a:hover{
    13             
    14             color: green;
    15         }
    16         /*鼠标摁住的时候a标签的样式*/
    17         .box ul li.item4 a:active{
    18             
    19             color: yellowgreen;
    20         }
    View Code

    再给大家介绍一种css3的选择器nth-child()

                  /*选中第一个元素*/
            div ul li:first-child{
                font-size: 20px;
                color: red;
            }
            /*选中最后一个元素*/
            div ul li:last-child{
                font-size: 20px;
                color: yellow;
            }
            
            /*选中当前指定的元素  数值从1开始*/
            div ul li:nth-child(3){
                font-size: 30px;
                color: purple;
            }
            
            /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
            div ul li:nth-child(n){
                font-size: 40px;
                color: red;
            }
            
            /*偶数*/
            div ul li:nth-child(2n){
                font-size: 50px;
                color: gold;
            }
            /*奇数*/
            div ul li:nth-child(2n-1){
                font-size: 50px;
                color: yellow;
            }
            /*隔几换色  隔行换色
                 隔4换色 就是5n+1,隔3换色就是4n+1
                */
            
            div ul li:nth-child(5n+1){
                font-size: 50px;
                color: red;
            }
    View Code

    06-伪元素选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            p::first-letter{
                color: yellow;
                font-size: 20px;
            }
            /*1.清除浮动  2.将$变成块级元素 3.并且显示不占位置(不会影响界面布局)*/
            p:after{
                content: '.';
                color: red;
                /*变成块级标签*/
                display: block;    
                /*可见的元素隐藏 隐藏完占位置*/
                visibility: hidden;
                height: 0;
    
    
                /*可见元素隐藏 让元素不占位置*/
                /*display: none;*/
                /*display: inline;*/
                /*display: inline-block;*/
            }
            /*p span{
                color: red;
            }*/
            button:hover{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>alex</p>
        <div>哈哈哈哈</div>
        <button>aaa</button>
    
    
    </body>
    </html>
    伪元素选择器
    /*设置第一个首字母的样式*/
            p:first-letter{
                color: red;
                font-size: 30px;
    
            }
            
    /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
            p:before{
                content:'alex';
            }
            
            
    /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
            p:after{
                content:'&';
                color: red;
                font-size: 40px;
            }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
    
            .top{
                 100%;
                height: 40px;
                background-color: #333;
            }
            .container{
                 1226px;
                /*height: 40px;*/
                background-color: red;
                margin-left: auto;
                margin-right: auto;
    
    
            }
            .top .top-l{
                 400px;
                height: 40px;
                background-color: yellow;
                text-align: center;
                line-height: 40px;
                /*脱离了文档*/
                float: left;
    
            }
            .top .top-r{
                 300px;
                height: 40px;
                background-color: blue;
                /*float: right;*/
                float: right;
            }
            .wrap{
                 100%;
                height: 200px;
                background-color: purple;
            }
            /*.clearfix:after{
                content: ".";
                display: block;
                height: 0;
                visibility: hidden;
                clear: both
            }*/
        </style>
    </head>
    <body>
        <div class="top">
            <div class="container clearfix">
                <div class="top-l">400*40</div>
                <div class="top-r">300*40</div>
            </div>
    
        </div>
    
        <div class="wrap">
            <div class="container">
                
            </div>
        </div>
    
        <div>
            
        </div>
    
        <div>
            
        </div>
        
    </body>
    </html>
    浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                 100%;
                height: 300px;
                background-color: red;
            }
            .box2{
                 100%;
                height: 500px;
                background-color: green;
            }
            .container{
                 1226px;
                /*height: 300px;*/
                /*background-color: pink;*/
                /*让盒子居中显示*/
                margin-left: auto;
                margin-right: auto;
            }
            .box .l{
                 200px;
                height: 200px;
                background-color: yellow;
                float: left;
                margin-right: 20px;
            }
            .box .r{
                 300px;
                height: 300px;
                background-color: purple;
                float: left;
            }
            .t{
                 400px;
                height: 400px;
                background-color: green;
                float: left;
            }
        </style>
    </head>
    <body>
            
        <div class="box">
            <div class="container">
    
                <div class="l">1</div>
                <div class="r">2</div>
                <div class="t">3</div>
    
                
            </div>
    
        </div>
        <div class="box2">
            <div class="container"></div>
    
        </div>
    
    </body>
    </html>
    浮动2

     

    总结;

    浮动:
                float:none; 不浮动
                float:left;左浮动
                float:right;右浮动
            记住:要浮动一起浮动,要么就别浮动
            
            选择器:
                id:通常与后面的js有很大关联
                class:
                    找的共性(相同特点)
                    
                    .container{
                        1226px;
                        margin: 0 auto;
                    }
            交集选择器:
                    第一个选择器是标签选择器,第二个选择器是类选择器
                    div.active
            组合选择器: 找共性
                    div,html,body,ul,ol....{
                    }
                    
                    *{
                        padding: 0;
                        margin: 0
                    }
                    
                    
                    html文档中像 link script img a audio video 等等 都是向服务器发送get请求
                     link script img a audio video:链接的资源文件叫静态资源文件
                     
            伪类选择器: 爱恨准则
            
            伪元素选择器:
                p:after{
                    content:''
                }
    伪类选择器
    伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则"  LoVe HAte
                        /*没有被访问的a标签的样式*/
                        .box ul li.item1 a:link{
                            
                            color: #666;
                        }
                        /*访问过后的a标签的样式*/
                        .box ul li.item2 a:visited{
                            
                            color: yellow;
                        }
                        /*鼠标悬停时a标签的样式*/
                        .box ul li.item3 a:hover{
                            
                            color: green;
                        }
                        /*鼠标摁住的时候a标签的样式*/
                        .box ul li.item4 a:active{
                            
                            color: yellowgreen;
                        }
                    
                    伪元素选择器
                            
                        p:after{
                            content: ".";
                            display: block;
                            height: 0;
                            visibility: hidden;
                            clear: both;
                        }
                        
                        
                    1.标准文档流
                        行内 块    
                        标签都是占位置                
                        一旦标签浮动了 该标签就会
                            (1)脱离了标准文档流
                            (2)可以设置宽高
                            (3)不占位置
    
    
    
    重置样式:
    *{
          pading:0;
          margin:0;
    }
    清除列表前面的点:list-style:none;
    背景色: background-color:green;
    字体大小: font-size
    水平,垂直居中:
    text-align: center;
    line-height: 40px;
    清除子元素浮动的影响:
    clear: both
    自动偏移: margin-left:auto
    属性选择器;
    属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
    语法:
    /*根据属性查找*/
                 /*[for]{
                     color: red;
                }*/
                  
                 /*找到for属性的等于username的元素 字体颜色设为红色*/
                  /*[for='username']{
                      color: yellow;
                  }*/
                 
                 /*以....开头  ^*/ 
                /*[for^='user']{
                     color: #008000;
                 }*/
                 
                 /*以....结尾   $*/
                 /*[for$='vvip']{
                     color: red;
                 }*/
                 
                 /*包含某元素的标签*/
                 /*[for*="vip"]{
                     color: #00BFFF;
                 }*/
                
                 /**/
                 
                 /*指定单词的属性*/
                 label[for~='user1']{
                     color: red;
                 }
                 
                 input[type='text']{
                     background: red;
                 }
  • 相关阅读:
    c++字符串
    Ubuntu系统的安装与使用 深度音乐播放器
    Ubuntu14.04安装wineqq国际版
    pythonchallenge 解谜 Level 0
    Ubuntu 14.04 安装pdf阅读器
    Ubuntu换源
    pythonchallenge 解谜
    java实现图像灰度化
    c语言完成宽带拨号
    应用程序权限设计
  • 原文地址:https://www.cnblogs.com/ls13691357174/p/9442366.html
Copyright © 2020-2023  润新知