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>
  • 相关阅读:
    [转载]Sublime Text 3 搭建 React.js 开发环境
    浏览器缓存之Expires Etag Last-Modified max-age详解
    第16周作业
    第15周作业
    第14周作业
    第13周作业集
    软件工程结课作业
    第13次作业--邮箱的正则表达式
    第12次作业--你的生日
    第11次作业--字符串处理
  • 原文地址:https://www.cnblogs.com/hellozizi/p/11459162.html
Copyright © 2011-2022 走看看