美文网首页
选择器css

选择器css

作者: simuty | 来源:发表于2017-06-26 11:38 被阅读7次

    css

    /*通用样式   界面美观需求*/
    
    body{
        width:430px;
        margin:30px auto;
    }
    .demoBase {
        width: 430px;
        border: 1px solid #cccccc;
        padding: 10px;          
    }
    ul{
        padding-left:0px;
    }
    .demoBase a {
        float: left;
        display: block;
        height: 30px;
        line-height: 30px;
        width: 30px;
        border-radius: 15px;
        text-align: center;
        background: #f36;
        color: #ffffff;
        margin-right: 5px;
        text-decoration: none;
    }       
    /*解决子元素浮动父元素高度坍塌的bug。浮动章节细讲*/
    .clearfix{
        overflow:auto;
        height:1%
    }
    li {
        float: left;
        height: 30px;
        line-height: 30px;
        width: 30px;
        border-radius: 15px;
        list-style: none;
        text-align: center;
        background: #f36;
        color: #ffffff;
        margin-right: 5px;
    }
    .table{
        width:450px;
        border:1px solid #cccccc;
    }
    .table td{
        border:1px solid #cccccc;
    }
    /*本节知识点*/
        /*新增属性选择器、过滤选择器、伪类选择器*/
       /*选择器可结合使用*/
        
    /*通配选择器 所有浏览器支持通配符选择器。*/
        /*1.选择页面所有元素*/
    /*
    *{
        margin:0;
        padding: 0;
    }
    */
        /*2.选择某个元素下的所有元素*/
    .demo2 *{
        border:1px solid #cccccc;
    }
    
    
    /*类选择器*/
        /*可以选择html页面上包含选择类的所有元素*/
        /*单类选择器*/
    .itemSpesial{
        background-color: #000000;
    }
        /*多类选择器。选择同时含有多各类的元素*/
            /*!!!!!
                如果多类选择器中某个类不存在。则将不能选择合适的元素
                .special .item1 类中间有空格。表示选择含.special类下的含.item1类的元素
                .special.item1  类中间无空格。表示选择同时含有.special.item1类的元素
            */
    .itemSpesial.item1{
        font-weight: bold; 
        color: yellow;
    }   
        
    
    /*元素选择器  所有浏览器支持通配符选择器。*/
        /*  元素选择器选择文档的元素,如html,body,p,div等等
            本例为区分其他选择器案例。和类选择器结合。选择.demo3类下所有的li元素
            如直接选择li元素。则将影响 html文档上所有li元素
        */
    .demo4 li{
        background-color: green;
    } 
    
    
    
    /*id选择器  选择制定id属性值的元素*/
    #item1{
        background-color: green;
    }
    
    
    
    /*
        将每一个选择器匹配的元素集合合并应用样式
        本示例采用的是几个6个类选择的元素集合。也可采用其他选择器选择元素然后集合
    */
    .item1,.item2,.item3,.item4,.item5,.item6{
        background-color: #0000FF;
    }
    
    
    
    /*层次选择器。根据html页面结构选择元素*/
    /*后代选择器 E F 选择匹配的F元素。其中F元素被包含在匹配的E元素中。就是查找E元素的所有F子元素*/
    .demo7 li{
        background-color: green;
    }
    
    
    /*
        子选择器 E>F 选择匹配的F元素。其中F元素是匹配的E元素的直接子元素
        !!!!注意是直接子元素。如果本例中  选择 .demo>li  选择器将不起作用。因为 .demo下无直接li子元素
        可  .demo8>ul>li   或者 .demo8 ul>li 实现 
        注意  .demo>ul>li   !==  .demo ui>li   只在本例中选择元素是一致
    
           .demo>ul>li   选择的是.demo 下直接ul元素下直接li元素
           .demo ul>li   选择的是 .demo 下所有ul元素下的直接li元素
    */
    .demo8>ul{
        border:1px solid #cccccc;
    }
    .demo8>ul>li{
        background-color: green;
    }
    
    
    
    /*
        相邻兄弟选择器
        E+F  选择匹配的F元素。其中F元素紧位于匹配的E元素之后
    */
    .demo9 li+li{
        background-color: green;
    }
    
    /*
        通用选择器
        E~F  选择匹配的F元素。且包含匹配的E元素后的所有的F元素
    */
    .demo10 li~li{
        background-color: green;
    }
    
    
    
    /*
        属性选择器   根据元素的属性来选择元素
        E[attr]:只使用属性名,但没有确定任何属性值;
        E[attr="value"]:指定属性名,并指定了该属性的属性值;
        E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
        E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
        E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
        E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
        E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
    */
    
    /*E[attr] 单一属性*/
    .demo11 a[id] {
        background: green; 
        color:yellow;
        font-weight:bold;
    }
    /*E[attr] 多属性*/
    .demo11 a[lang][title] {
        background: yellow; 
        color:green;
    }
    .demo11 a[black][title] {
        background: blue; 
        color:green;
    }
    
    /*E[attr="value"] 单一属性*/
        /*
            注意属性的值要完全匹配
            如页面上有个元素 class="text1 texe2"
            [attr="text1"]无法选择元素
            [attr="text1 text2"] 选择元素
        */
    .demo12 a[id="last"] {
        background: green; 
        color:yellow;
        font-weight:bold;
    }
    /*E[attr] 多属性*/
    .demo12 a[lang="zh"][title="item2"] {
        background: yellow; 
        color:green;
    }
    
    /*E[attr~="value"] */
    .demo13 a[title~="text"] {
        background: green; 
        color:yellow;
        font-weight:bold;
    }
    
    /*E[attr^="value"]*/
    .demo14 a[title^="item"] {
        background: green; 
        color:yellow;
        font-weight:bold;
    }
    
    /*E[attr$="value"]*/
    .demo15 a[lang$="h"] {
        background: green; 
        color:yellow;
        font-weight:bold;
    }
    
    /*E[attr|="value"]*/
    .demo16 a[lang|="zh"]{
        background: green; 
        color:yellow;
        font-weight:bold;}
    
    /*E[attr*="value"]*/
    .demo17 a[lang*="zh"]{
        background: green; 
        color:yellow;
        font-weight:bold;}
    
    
    /*
        伪类选择器
            E:pseudo-class {property:value}   其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值
                a:link {color:red;}
            E.class:pseudo-class{property:value}
                a.selected:hover {color: blue;}
    */
    /*
        动态伪类
            锚点伪类  link、visited、hover active  其中 Link--visited--hover--active
            用户行为类   
                :hover用于当用户把鼠标移动到元素上面时的效果;
                :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
                :focus用于元素成为焦点,这个经常用在表单元素上。
        元素状态类
            :enabled    可写状态
            :disabled   不可写状态
            :checked
            :unchecked
        结构类
            :first-child选择某个元素的第一个子元素;
            :last-child选择某个元素的最后一个子元素;
            :nth-child()选择某个元素的一个或多个特定的子元素;
            :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
            :nth-of-type()选择指定的元素;
            :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
            :first-of-type选择一个上级元素下的第一个同类子元素;
            :last-of-type选择一个上级元素的最后一个同类子元素;
            :only-child选择的元素是它的父元素的唯一一个了元素;
            :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
            :empty选择的元素里面没有任何内容。
    */
    .demo18 li:first-child {background: green; border: 1px dotted blue;}
    .demo18 li:last-child {background: green; border: 2px dotted blue;}
    
    
    /*
        :nth-child(length);   参数是具体数字  为整数
        :nth-child(n);参数是n,n从0开始计算
        :nth-child(n*length)n的倍数选择,n从0开始算
        :nth-child(n+length);选择大于length后面的元素
        :nth-child(-n+length)选择小于length前面的元素
        :nth-child(n*length+1);表示隔几选一
    
    
        :nth-last-child() 和:bth-child() 用法类似。。 计算方向是相反
    */
    
    .demo19 li:nth-child(3)  {background: green; border: 1px dotted blue;}
    .demo19 li:nth-last-child(3)  {background: green; border: 1px dotted blue;}
    
    
    
    /*
        :nth-of-type
        :nth-last-of-type
        :first-of-type和:last-of-type
        :first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。
        :only-child和:only-of-type":only-child"表示的是一个元素是它的父元素的唯一一个子元素
        :empty是用来选择没有任何内容的元素
    */
    
    /*
        伪元素
        两个"::"和一个":"css3中主要用来区分伪类和伪元素
        ::first-letter  选择元素的第一行
            p::first-line {font-weight:bold;}
    
        ::first-line  文本块的第一个字母
        ::before  给元素的前面插入内容
        ::afte    给元素的后面插入内容
        ::selection用来改变浏览网页选中文的默认效果
    */
    

    更多精彩内容请关注“IT实战联盟”哦~~~


    IT实战联盟.jpg

    相关文章

      网友评论

          本文标题:选择器css

          本文链接:https://www.haomeiwen.com/subject/tpwdcxtx.html