8.14_css3-02

文本溢出样式 ：末尾生成三个省略号

文本超出容器以后：

1. 换行显示
2. 超出容器部分也显示

封装一个类名，和清浮动一样，经常在页面开发时使用

.ellipsis{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		display:block;

层次选择器

/*+号是选择下边紧邻着的兄弟元素，
并且必须是我们规定的元素*/
.box>p:nth-child(1)+span{
	backgraoud-color:green;
	}
/*~号是选择下边所有规定的兄弟元素*/
.box>p:nth-child(1)~h2{
	background-color:green;

伪类和伪元素 都是css中的

伪类：通过伪类选择器去选择到不存在于DOM树中的信息，还有通过一般的选择器获取不到的信息（:hover、:nth-child）

伪元素： 在DOM树中创建了一个元素，这个元素不存在于html源码中
我们无法去获取一行文字的第一个字，一段文字的第一行字。我们可以把他们变成一个伪元素来获取到，并控制样式

样式控制的优先级顺序：

!important > style > id > class(伪类也是类) > 标签名（伪元素） > * >继承

伪类：

input伪类input:focus

选择input中获得焦点的
input:focus{
	background-color:red;
	}

target伪类 a标签锚链接

让用户看到box有两种方法：
1、直接翻动滚动条翻过去
2、点击锚链接跳转,使用a标签
target伪类就是说：当一个元素被锚链接跳转过来的时候，改变样式

#box:target{
	background-color:greenyellow;
	}
<a href="#box">点击跳转到box</a>
<div id="box"> </div>

结构伪类选择器

:first-child

1、选中当前元素在父级的第一个子元素，不一定是一个
2、选中所有的span 并且这个span父元素的第一个子元素

div span:first-child{
            background-color: red;
        }

:last-child

1、选中当前元素在父级的最后一个子元素，不一定是一个
2、选中所有的span 并且这个span父元素的最后一个子元素

div span:last-child{
            background-color: green;
        }

nth-child(i)，nth-last-child(i)

/*选中ul中的li  并且是父级的第二个子元素*/
 ul li:nth-child(2){
            background-color: red;
        }

/*选择的是outer中的p标签  并且这个p标签是父级中的第二个子元素*/
        .outer>p:nth-child(2){
            background-color: green;
        }
/*选择的是outer中的p标签，且这个p标签是父级的倒数第二个子元素*/
        .outer>p:nth-last-child(2){
            background-color: green;
        }

:only-child

/*选择的是ul中所有的li  并且这个li是父级中唯一一个子元素*/
        ul li:only-child{
            background-color: red;
        }

:empty

/*所有ul中的li 并且这个li是空标签*/
        ul li:empty{
            background-color: green;
        }

:not(.show)

/*所有ul中的li  除了类名为show的 其他都被选中*/
        ul li:not(.show){
            background-color: yellow;
        }

伪元素

在con中的最前边创建一个子元素ele:before（伪元素）

#con:before{
	   content: "我是你得到的爸爸";
	   background-color: grey;
	   width: 200px;
	   height: 200px;
	   display: block;
	   background-image: url(../images/cy-logo.png);
	   float: left;
}

在con中的最后边创建一个子元素ele:after（伪元素）

#con:after{
	   content: "我是你得到的after";
	   background-color: grey;
	   width: 200px;
	   height: 200px;
	   display: block;
	   background-image: url(../images/cy-logo.png);
	   float: left;
}

选中段落文字的第一个字ele：first-letter（伪元素）

 #con:first-letter{
	     font-size: 80px;
	      background-color: green;
        }

选中段落文字的第一行，把第一行当成了一个（伪元素）ele:first-line

 #con:first-line{
            background-color: pink;
        }

当鼠标选中文字的时候，设置文字的样式，一般支持颜色和背景颜色ele::selection(伪元素）

#con::selection{
       background-color: yellow;
         color: #1eff0a;
        }

覆盖表单样式

1. 首先原本的表单还是要写在HTML中，但是要把设置表单的样式为以下代码：

	select{
         /* width: 0;
           height: 0;
           position: absolute;
           border: none;*/
           display: none;
	        }

自定义的checkbox

1、checkbox只能支持宽高的设置，不能支持其他的样式设置
2、css3提供了一个属性 可以去掉单选框和多选框的默认样式
3、去掉默认样式：appearance:none；
4、在css3样式中，有私有的和w3c标准的，当一个样式支持性处于测试阶段的时候，一般这个属性可能会是测试浏览器私有的，所以要加上浏览器的前缀

input[type=checkbox]{
            -webkit-appearance: none;
            -moz-appearance: none;
             -o-appearance: none;
            -ms-appearance: none;
            appearance: none;
            background: url("../images/icon_check.png") center center no-repeat;
            width:100px;
            height:100px;
            background-size:cover;
        }
input[type=checkbox]:checked{
    background: url("../images/icon_checked.png")center center no-repeat;
    background-size: cover;
}

浏览器内核和前缀

浏览器	内核	前缀
谷歌	Webkit	-Webklt-
火狐	Gecko	-moz
safari	Webkit	-Webklt-
欧朋	Webklt	-Webklt-
IE	trident	-ms-

点击按钮让表单手动提交

oBtn.onclick = function () {
        // submit方法 让表单提交
        oForm.submit();
    }