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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        /*后代选择器*/
        /*div span{*/
        /*    color: aqua;*/
        /*}*/
    
    
        /*子选择器*/
        /*div>span{*/
        /*    color: red;*/
        /*}*/
    
    
        /*毗邻选择器*/
        /*div+span{*/
        /*    color: blue;*/
        /*}*/
    
        /*兄弟选择器*/
        /*div~span{*/
        /*    color:chartreuse;*/
        /*}*/
    
    
            /*1.具有某个属性名
            2.具有某个属性名及属性值
            3.具有某个属性名及属性值某个标签
            */
            /*找只要有hobby这个属性名的所有标签*/
    
        /*属性选择器1*/
        /*[hobby='xxx']{*/
        /*    color: chartreuse;*/
        /*}*/
    
        /*属性选择器2*/
        /*[hobby]{*/
        /*    color: red;*/
        /*}*/
    
        /*分组嵌套选择器*/
        /*div,span,p{*/
        /*    color: blue;*/
        /*}*/
    
    
        /*伪类选择器*/
    
        /*链接未点击时的颜色*/
        /*a:link{*/
        /*    color: chartreuse;*/
        /*}*/
    
        /*!*鼠标悬浮在链接上时的颜色 *!*/
        /*a:hover{*/
        /*    color: red;*/
        /*}*/
    
        /*!*鼠标点击链接时的颜色 *!*/
        /*a:active{*/
        /*    color: aqua;*/
        /*}*/
    
        /*!*鼠标点过链接后的颜色*!*/
        /*a:visited{*/
        /*    color: brown;*/
        /*}*/
    
    
        /*!*鼠标选中文本框时的颜色 *!*/
        /*input:focus{*/
        /*    background: red;*/
        /*}*/
    
        /*!*鼠标悬浮在文本框上时的颜色*!*/
        /*input:hover{*/
        /*    background: aqua;*/
        /*}*/
    
        /*改变所有p标签内内容中第一个字符的样式*/
        /*p:first-letter{*/
        /*    color: red;*/
        /*}*/
    
    
        /*在所有p标签内内容的前面加入一个符号*/
        /*p:before{*/
        /*    content: '$';*/
        /*}*/
    
    
    
    
            /*
            1.选择器相同的情况下:就近原则
            2.选择器不同的情况下:
    
            精度越高,优先级越高
    
    
            行内  > id选择器 > 类选择器  > 标签选择器
        */
    
        </style>
        
        
    
    
    </head>
    <body>
    <span>div上面第一个span</span>
    <span>div上面第二个span</span>
    <div >div
        <span>div里面的第一个span</span>
        <p>div里面的第一个p
            <span hobby="xxx">div里面的第一个p里面的span</span>
        </p>
        <span>div里面最后一个span</span>
    </div>
    <span hobby="xxx">div下面的第一个span</span>
    <span hobby="123">div下面的第二个span</span>
    <span>div下面的第三个span</span>
    
    <a href="http://www.baidu.com">伪类选择器测试</a>
    
    <input type="text">
    
    <p>100</p>
    <p>1000</p>
    <p>10000</p>
    
    
    </body>
    </html>
  • 相关阅读:
    Java知多少(28)super关键字
    Java知多少(27)继承的概念与实现
    Java知多少(26)源文件的声明规则
    Java知多少(25)再谈Java包
    Java知多少(24)包装类、拆箱和装箱详解
    Java知多少(23)类的基本运行顺序
    Java知多少(22)方法重载
    Java知多少(21)this关键字详解
    Java知多少(20)变量的作用域
    Java知多少(19)访问修饰符(访问控制符)
  • 原文地址:https://www.cnblogs.com/hellozizi/p/11459162.html
Copyright © 2011-2022 走看看