CSS3的新特性-学习笔记

  • 时间:
  • 浏览:
  • 来源:互联网

现状:CSS3特性有兼容性问题,IE9以上,移动端;
CSS3新增选择器,可以更加便捷,更加自由的选择目标元素

1. 属性选择器

可以根据特定元素的属性来选择元素,这样就可以不用借助类选择器或者id选择器。

  • 第一种
<style>
/*第一种*/
 /*首先选择div 然后具有value属性的元素*/
input[value]{
    color:red
}
</style>
<!--1. 利用属性选择器可以不用借助类或者id选择器-->
<input type="text" value="请输入用户名">
<input type="text">

效果图如下:
在这里插入图片描述

  • 第二种
<style>
 /*第二种*/
 /*设置input的value属性的样式*/
 input[type=text]{
     color: skyblue;
 }
</style>

<!--2. 属性选择器还可以选择属性=值的某些元素-->
<input type="text" value="请输入用户名">
<input type="password">

效果图如下:
在这里插入图片描述

  • 第三种
<style>
/*第三种*/
/*首先选择div 然后具有class属性,并且属性值是icon开头的元素*/
div[class^=icon]{
    color:red;
}
</style>

<!--3. 属性选择器可以选择属性值开头的某些元素-->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div >酱油</div>

效果图如下:
在这里插入图片描述

  • 第四种
<style>
 /*第四种*/
 /*首先选择div 然后具有class属性,并且属性值是data结尾的元素*/
 selection[class$=data]{
     color: salmon;
 }
</style>
<!--4. 属性选择器可以选择属性值结尾的某些元素-->
<selection class="icon1-data">1</selection>
<selection class="icon2-data">2</selection>
<div class="icon3-ico">咸鱼</div>

效果图如下:
在这里插入图片描述

  • 第五种
<style>
/*!*第五种*!*/
/*首先选择div 然后具有class属性,并且属性值含有ico的元素*/
div[class*=ico]{
    color: salmon;
}
</style>


<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div >酱油</div>
<selection class="icon1-data">1</selection>
<selection class="icon2-data">2</selection>
<div class="icon3-ico">咸鱼</div>

效果图如下:
在这里插入图片描述

2. 结构伪类选择器

主要常用于选择父级里面的第几个子元素

  • 第一个
<style>
/*1. 选择ul下面li里面的第一个孩子*/
ul li:first-child{
    background-color: yellowgreen;
}
</style>

<ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
</ul>

效果图如下:
在这里插入图片描述

  • 第二个
<style>
/*2. 选择ul下面li里面的最后一个孩子*/
ul li:last-child{
    background-color: yellowgreen;
}
</style>
<ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
</ul>

效果图如下:
在这里插入图片描述

  • 第三个
<style>
/*3. 选择ul下面li里面的一个或者特定的孩子*/
/*nth-child(n) 选择某个父元素的一个或者多个特定的子元素*/
/*n 可以是数字[是数字则从1开始]、
    可以是关键字[even偶数、odd奇数]{此种方式可以实现隔行变色}、
    可以是公式 公式是从0开始的*/
ul li:nth-child(even){
    background-color: salmon;
}
ul li:nth-child(odd){
    background-color: skyblue;
}
</style>
<ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
    <li>我是第7个孩子</li>
    <li>我是第8个孩子</li>
</ul>

这就很轻易地实现了表格的隔行换色效果
效果图如下:
在这里插入图片描述
其中 nth-childnth-of-type 的用法都是一模一样的。但是有个较大的区别:

  • nth-child 针对所有的元素
  • nth-of-type 针对指定元素类型

3. 伪元素选择器

可以帮助我们利用CSS创建新标签元素,而不需要HTML标签简化HTML结构!

具体介绍:
在这里插入图片描述
注意:

  • before和after创建一个元素但是属于行内元素
  • 新创建的这个元素在dom树中是找不到的,所以称为伪元素
  • 语法:element::brfore{}
  • brfore和after必须有content属性
  • before在父元素里面的前面插入元素,after在父元素里面的后面插入元素
  • 为元素和标签选择器一样,权重为1
<style>
 div{
     width: 200px;
     height: 200px;
     background-color: salmon;
 }
 div::before{
     /*这个content是必须的*/
     content: "I am ";
     /*给定样式,转行内块元素,给宽高*/	
     display: inline-block;
     width: 30px;
     height: 30px;
     background-color: yellowgreen;
 }
 div::after{
     content: ' will  good good study ';
 }
</style>

<div>yes</div>

效果图如下:
在这里插入图片描述

本文链接http://www.dzjqx.cn/news/show-617268.html