CSS3 新增挑选器的案例

日期:2021-02-28 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

构造(部位)伪类挑选器(CSS3)

  • :first-child :选择属于其父元素的首个子元素的特定挑选器
  • :last-child :选择属于其父元素的最终1个子元素的特定挑选器
  • :nth-child(n) : 配对属于其父元素的第 N 个子元素,无论元素的种类
  • :nth-last-child(n) :挑选器配对属于其元素的第 N 个子元素的每一个元素,无论元素的种类,从最终1个子元素刚开始计数。 n 能够是数据、重要词或公式​
li:first-child { /*  挑选第1个孩子 */
                color: pink; 
            }
li:last-child {   /* 最终1个孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 挑选第4个孩子  n  意味着 第几个的意思 */ 
                color: skyblue;
            }

特性挑选器

选择标识带有一些独特特性的挑选器 大家变成特性挑选器

/* 获得到 有着 该特性的元素 */
div[class^=font] { /*  class^=font 表明 font 刚开始部位就可以了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表明 footer 完毕部位就可以了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表明tao 在随意部位都可以以 */
            color: green;
        }
<div class="font12">特性挑选器</div>
    <div class="font12">特性挑选器</div>
    <div class="font24">特性挑选器</div>
    <div class="font24">特性挑选器</div>
    <div class="font24">特性挑选器</div>
    <div class="24font">特性挑选器123</div>
    <div class="sub-footer">特性挑选器footer</div>
    <div class="jd-footer">特性挑选器footer</div>
    <div class="news-tao-nav">特性挑选器</div>
    <div class="news-tao-header">特性挑选器</div>
    <div class="tao-header">特性挑选器</div>
input[type=text]
div[class*=tao]

伪元素挑选器(CSS3)

  • E::first-letter文字的第1个单词或字(如汉语、日文、韩文等)
  • E::first-line 文字第1行;
  • E::selection 可更改选定文字的款式;
p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行独特款式 */
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素內部的刚开始部位和完毕位建立1个元素,该元素为行内元素,且务必要融合content特性应用。

div::befor {
  content:"刚开始";
}
div::after {
  content:"完毕";
}

E:after、E:before 在旧版本号里是伪元素,CSS3的标准里“:”用来表明伪类,“::”用来表明伪元素,可是在高版本号访问器下E:after、E:before会被全自动鉴别为E::after、E::before,这样做的目地是用来做适配解决。

":" 与 "::" 差别在于区别伪类和伪元素

之因此被称为伪元素,是由于她们并不是真实的网页页面元素,html沒有对应的元素,可是其全部用法和主要表现个人行为与真实的网页页面元素1样,能够对其应用诸如网页页面元素1样的css款式,表层上看上去貌似是网页页面的一些元向来呈现,具体上是css款式呈现的个人行为,因而被称为伪元素。是伪元素在html编码组织中的呈现,能够看出没法伪元素的构造没法核查

留意

伪元素:before和:after加上的內容默认设置是inline元素**;这个两个伪元素的content特性,表明伪元素的內容,设定:before和:after时务必设定其content特性,不然伪元素就不起功效。

总结

以上所述是网编给大伙儿详细介绍的CSS3 新增挑选器的案例,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!