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-child 和nth-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>

效果图如下：