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

    CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?css3新增伪类有哪些?

    选择器:

                    

    标签选择器(div,h1,p)、
    
    id选择器(#myid)、
    
    类选择器(.myclassname)、
    
    相邻选择器(h1+p)、
    
    子选择器(ul > li)、
    
    后代选择器(li  a)、
    
    通配符选择器(*)、
    
    属性选择器(a[ rel = "external"])、
    
    伪类选择器(a:hover,  li:nth-child)
    

     CSS选择器{
        声明
    }

    id选择器:#号表示ID选择器

    #span{
        border:1px solid;
    }
    

      



    属性选择器

    input[type="text"]{   }
    
    img[alt="logo"]{    }



    元素/标签/标记选择器:

    span{
    
    }



    组合/并集选择器:类等选择器都可以加入,用英文,隔开

    h1,h2,h3,h4,h5,h6{
    
    }



    类选择器:相同命名共用声明,用.表示类选择器

    class="test_class"
    .test_class
    { }



    后代选择器:选中所有子集及以下子集

    ul li{
    
    }


    子集选择器:只选择到子集

    ul>li{
    
    }



    伪类选择器:加英文:都属于伪类(一定要按link,visited,hover,active的顺序写 LVHA)

    a:link{
        当前样式
    }

    a:visited{ 访问后样式 }

    a:hover{ 移入鼠标,鼠标悬停时样式 }

    a:active{ 点击时的样式 }



    伪元素选择器:用两个英文:表示与伪类的区分

    .p1:before{
        content:"属性值";
    }
    
    .p1:after{
        content:"属性值";
    }
    
    .box:first-latter{
        font-latter:属性值;
    }
    
    .box:first-line{
        font-latter:属性值;
    }



    dispaly:inline-block;  (行内转行内块) 

    可继承的样式font-size    font-family  color,   text-indent;

    不可继承的样式border     padding     margin     width     height     

    优先级就近原则,同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

    优先级为

    !important   >   id    >    class    >tag  

    important   比内联优先级高,但内联比  id  要高

    css3新增伪类举例

    p:first-of-type     选择属于其父元素

  • 相关阅读:
    PHP 求多个数组的笛卡尔积,适用于求商品规格组合 【递归思想, 类似广度优先搜索】【原创】
    CCF推荐期刊会议
    SCI分区
    值和指针接收者的区别
    程序员练级攻略
    保险
    golang 有缓冲channel和无缓冲channel
    后台学习路线
    golang之反射
    atomic和mutex
  • 原文地址:https://www.cnblogs.com/jiangyuzhen/p/10496988.html
Copyright © 2011-2022 走看看