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

    CSS简介:

      Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。css的最新版本是css3,我们目前学习的是css2.1

    CSS优点:

    1. 使数据和显示分开
    2. 降低网络流量
    3. 使整个网站视觉效果一致
    4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

    引入方式:

    1. 行内样式
      <div>
           <p style="color: green">我是一个段落</p>
      </div>
    2. 内接样式
      复制代码
      <style type="text/css">
          /*写我们的css代码*/
              
          span{
          color: yellow;
          }
      
      </style>
      复制代码
    3. 外接样式

         1 链接式:

    <link rel="stylesheet" href="./index.css">

         2 导入式:

    <style type="text/css">
            @import url('./index.css');
    </style> 

    选择器:

      1, 基本选择器:

        1, 标签选择器:

          标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

    复制代码
    body{
        color:gray;
        font-size: 12px;
    }
    /*标签选择器*/
    p{
        color: red;
    font-size: 20px;
    }
    span{
        color: yellow;
    }
    复制代码

        2, id选择器: 选中id用 # :

          同一个页面中id不能重复任何的标签都可以设置id ; id命名规范 要以 字母 可以有 数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

          ps: id一般是用在js的。也就是说 js是通过id来获取到标签

    复制代码
    #box{
        background:green;
    }
                
    #s1{
        color: red;
    }
    
    #s2{
        font-size: 30px;
    }
    复制代码

        3, 类选择器: 选中类用 点(.) :

          1, 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念

          2, 同一个标签中可以携带多个类,用空格隔开

    复制代码
    .lv{
        color: green;
    
    }
    .big{
        font-size: 40px;
    }
    .line{
        text-decoration: underline;
    }
    复制代码

          ps:  不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式

            每个类要尽可能的小,有公共的概念,能够让更多的标签使用

            用好了类 就等于用好了css中的1/2

            一定要有”公共类“的概念 ( 公共类的使用, 决定了该前端程序员的CSS水准)

    <!-- 公共类    共有的属性 -->
        <div>
            <p class="lv big">段落1</p>
            <p class="lv line">段落2</p>
            <p class="line big">段落3</p>
        </div>
    <!-- 公共类    共有的属性 -->
        <div>
            <p class="lv big">段落1</p>
            <p class="lv line">段落2</p>
            <p class="line big">段落3</p>
        </div>

      2, 高级选择器:

        1, 后代选择器:

          使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

    .container p{
        color: red;        
    }
    .container .item p{
        color: yellow;
    }

        2, 子代选择器:

          使用 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

    .container>p{
        color: yellowgreen;
    }

        3, 并集选择器:

          多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

    /*并集选择器*/
    h3,a{
        color: #008000;
        text-decoration: none;
                    
    }
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
          margin: 0;
          padding: 0
       }
    /*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
          margin: 0;
          padding: 0
       }
    /*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/

        4, 交集选择器:

          使用 . 表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

    复制代码
    h4{
         100px;
        font-size: 14px;
    }
    .active{
        color: red;
        text-decoration: underline;
    }
    /* 交集选择器 */
    h4.active{
        background: #00BFFF;
    }
    复制代码

      3, 属性选择器:

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

    复制代码
    /*根据属性查找*/
                /*[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;
                }
    复制代码

      4, 伪类选择器:

        伪类选择器一般会用在超链接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;
            }
    复制代码

    /*选中第一个元素*/
    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;
    }

    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;
            }
    复制代码

      5, 伪元素选择器:

    复制代码
    /*设置第一个首字母的样式*/
            p:first-letter{
                color: red;
                font-size: 30px;
    
            }
            
    /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
            p:before{
                content:'alex';
            }
            
            
    /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
            p:after{
                content:'&';
                color: red;
                font-size: 40px;
            }
    复制代码

     

    CSS选择器的优先级*****

      1.选择器相同

        最后加载的样式覆盖上面的样式

      2.选择器不同

        不同的选择器的优先级不一样(根据权重计算)

        内联(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承的(0)

      3.不讲道理的

  • 相关阅读:
    gc buffer busy/gcs log flush sync与log file sync
    给Oracle年轻的初学者的几点建议
    Android 编程下帧动画在 Activity 启动时自动运行的几种方式
    Android 编程下 Touch 事件的分发和消费机制
    Java 编程下 static 关键字
    Java 编程下 final 关键字
    Android 编程下模拟 HOME 键效果
    Why Are Thread.stop, Thread.suspend, Thread.resume and Runtime.runFinalizersOnExit Deprecated ?
    Extjs4 大型项目目录结构重构
    [转]SQLServer 2008 允许远程连接的配置方法
  • 原文地址:https://www.cnblogs.com/123zzy/p/9580338.html
Copyright © 2011-2022 走看看