zoukankan      html  css  js  c++  java
  • 前端基础之CSS选择器

    一:CSS基础简介

    【1】基础结介绍

    (1)简介:层叠样式定义表

    (2)作用:当浏览器读到一个样式表的时候 其会通过CSS样式表对网页进行格式化渲染

    【2】CSS语法

    (1)组成部分

      (1)选择器

      (2)声明

        (1)属性

        (2)属性值

    /* P:选择器
       括号:属性 以及属性值
     */
    
    p {
        color: antiquewhite;
        font-size: 14px;
    }

    (2)CSS注释

    /*单行注释*/
    
    /*多行注释1
      多行注释2*/

    二:CSS引入方式

    (1)外部样式引入

    例如:

    
      <!--    引入外部CSS样式-->
    <link rel="stylesheet" href="my_css.css">

    PS:此种方式调用有点类似于调用第三方模块 此方式最为正规

    (2)内部样式定义:

    例如:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    内部样式定义-->
        <style>
            p{color: blue}
        </style>
    </head>

    (3)行内样式定义

    例如:

    <p style="color: aqua">迟迟钟鼓初长夜 耿耿星河欲曙天</p>

    PS:此种方式最不推荐

    三:CSS选择器

    【1】基本选择器:

    (1)标签选择器:

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p{color: blue}
        </style>
    </head>
    <body>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    </body>
    </html>
    标签选择器

    PS:只有被选择的标签才会被相应的CSS渲染

    (2)类选择器:

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    类的语法结构.加类名-->
        <style>
    
            .c1{color: blue}
            .p1{font-size: 20px}
            
        </style>
    </head>
    <body>
    <p class="p1">迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <!--一个标签中可以选择多个类-->
    <div class="c1 p1">上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    </body>
    </html>
    类选择器

    (3)id选择器

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    类的语法结构.加类名-->
        <style>
    
            .c1{color: blue}
            .p1{font-size: 20px}
            /*id选择器*/
            #d1{ font-size: medium; color: wheat}
            
        </style>
    </head>
    <body>
    <!--绑定上述选择器-->
    <p id="d1">迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <!--一个标签中可以选择多个类-->
    <div class="c1 p1">上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    </body>
    </html>
    id选择器

    (4)通用选择器;

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    通用选择器-->
        <style>
    
            *{color: red}
            
        </style>
    </head>
    <body>
    
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p >迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    
    <div >上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    <div>上穷碧落下黄泉 两处茫茫皆不见</div>
    </body>
    </html>
    通用选择器

    PS:此种方式基本不会使用 因为其直接匹配整个网页代码 网页太过于单调

    【2】组合选择器:

    (1)后代选择器

    例如:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
    /*div下所有的span都被css样式修改*/
            div span{color: red}
        </style>
    </head>
    <body>
    
    <span>div上面第一个span</span>
    <span>div上面第二个span</span>
    <div>div
        <span>div里面的第一个span</span>
        <p>div里面的第一个p
            <span>div里面的第一个p里面的span</span>
        </p>
        <span>div里面最后一个span</span>
    </div>
    <span>div下面的第一个span</span>
    <span>div下面的第二个span</span>
    <span>div下面的第三个span</span>
    后代选择器

    PS:其中span内所有的代码都会被CSS渲染

    (2)儿子选择器

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
    /*div下所有的p都被css样式修改*/
            div >p{color: red}
        </style>
    </head>
    <body>
    
    <span>div上面第一个span</span>
    <span>div上面第二个span</span>
    <div>div
        <span>div里面的第一个span</span>
        <p>div里面的第一个p
            <span>div里面的第一个p里面的span</span>
        </p>
        <p>div内的最后一个P标签</p>
        <span>div里面最后一个span</span>
    </div>
    <p>div外的第一个P标签</p>
    <span>div下面的第一个span</span>
    <span>div下面的第二个span</span>
    <span>div下面的第三个span</span>
    </body>
    </html>
    儿子选择器

    (3)毗邻选择器

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
    /*div 外面第一个span都被css样式修改*/
            div+span{color: blue}
        </style>
    </head>
    <body>
    
    <span>div上面第一个span</span>
    <span>div上面第二个span</span>
    <div>div
        <span>div里面的第一个span</span>
        <p>div里面的第一个p
            <span>div里面的第一个p里面的span</span>
        </p>
        <p>div内的最后一个P标签</p>
        <span>div里面最后一个span</span>
    </div>
    <span>div下面的第一个span</span>
    <br>
    <span>div下面的第二个span</span>
    <br>
    <span>div下面的第三个span</span>
    </body>
    </html>
    毗邻选择器

    (4)弟弟选择器

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
    /*div 外面所有span都被css样式修改*/
            div~span{color: blue}
        </style>
    </head>
    <body>
    
    <span>div上面第一个span</span>
    <span>div上面第二个span</span>
    <div>div
        <span>div里面的第一个span</span>
        <p>div里面的第一个p
            <span>div里面的第一个p里面的span</span>
        </p>
        <p>div内的最后一个P标签</p>
        <span>div里面最后一个span</span>
    </div>
    <span>div下面的第一个span</span>
    <br>
    <span>div下面的第二个span</span>
    <br>
    <span>div下面的第三个span</span>
    </body>
    </html>
    弟弟选择器

    【3】属性选择器

    例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
    /*含有某个属性名*/
        p[hobby]{
            color: red;
        }
    
            /*某个属性名以及属性值*/
            p[hobby='read']{color: blue}
    
            /*标签名称 属性名称 属性值*/
            span[hobby='read']{color: red}
    
        </style>
    </head>
    <body>
    
    <p name="username" hobby="read">迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p hobby="dbj">迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <p>迟迟钟鼓初长夜 耿耿星河欲曙天</p>
    <span hobby="read">span标签</span>
    
    </body>
    </html>
    属性选择器的三种方式

    【4】分组嵌套:

    (1)分组:当多个元素样式相同的时候 我们不需要写多个样式 直接进行分组组合即可

    例如:

    /*P div span都设置blue这个css样式*/
        p,div,span{
            color: blue;
        }

    (2)嵌套:多种选择器可以嵌套使用

    例如:

      <style>
    
            .c1,p{
                color: blue;
            }
    
        </style>

    【5】伪类选择器

    (1)未连接状态(还未连接之前的状态):

       a:link{color: blue}

    (2)鼠标悬浮态(鼠标放上去的状态):

     a:hover{color: red}

    (3)连接时状态(鼠标放在连接 点击连接时的状态)

    a:active{color: aqua}

    (4)连接完成态(连接完成之后的状态)

    a:visited{color: black}

    【6】伪元素选择器

    (1)first-letter:

    作用:对文本首字母进行css样式操作

    例如:

     <style>
            p:first-letter{color: wheat;
            font-size: larger}

    (2)before

    作用:在文本前面插入数据

    例如:

         p:before{
                content: '$';
                color: wheat;
                font-size: medium;
            }

    (3)after

    作用:在文本后面插入数据

    例如:

    p:after{
                content: '$';
                color: wheat;
                font-size: medium;
            }

    PS:插入的数据不能被鼠标选中

    【6】选择器优先级:

    (1)当有多个选择器操作通一个标签的时候 只会有一个生效

    (2)优先级比较

      (1)不同选择器进行比较 就近原则

      (2)不同选择器进行比较

  • 相关阅读:
    省市区选择器
    查找算法 分享1:顺序查找
    查找算法 分享2:折半(二分)查找
    编程实现对键盘输入的英文名句子进行加密。用加密方法为,当内容为英文字母时其在26字母中的其后三个字母代替该字母,若为其它字符时不变。
    查找算法 分享3:分块查找
    NSMutableDicitionary 的setValue和setObject的区别
    查找算法 分享4:哈希查找
    玩转博客园的5个小技巧
    WCF读书笔记安全:基础知识(身份验证、授权、传输安全)
    北京的房价
  • 原文地址:https://www.cnblogs.com/SR-Program/p/11459424.html
Copyright © 2011-2022 走看看