CSS新增选择器

新增属性选择器

类选择器、属性选择器、伪类选择器，权重为10
标签选择器 权重为1

    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text"> 
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */

结构伪类选择器

	    <!--结构伪类选择器-->
	    <ul>
	    	<li>我是1</li>
	    	<li>我是2</li>
	    	<li>我是3</li>
	    	<li>我是4</li>
	    	<li>我是5</li>
	    	<li>我是6</li>
	    	<li>我是7</li>
	    </ul>
	    
	    <ol>
	    	<li>我是1</li>
	    	<li>我是2</li>
	    	<li>我是3</li>
	    	<li>我是4</li>
	    	<li>我是5</li>
	    	<li>我是6</li>
	    	<li>我是7</li>
	    </ol>	

			/*结构伪类选择器*/
			ul li:first-child {
				color: blue;
			}
			ul li:last-child {
				color: palevioletred;
			}
			/*nth-child(n) :n可以为数字 表示选第几个子元素; 也可以为关键字:even偶数,odd奇数; 也可以为公式*/
			ul li:nth-child(2) {
				color: skyblue;
			}
			ul li:nth-child(even) {
				background-color: salmon;
			}
			 /*填n,可以选择所有子元素 n从0开始计算*/
			ol li:nth-child(n) {
				color: brown;
			}
			 /*填2n,可以选择所有偶数子元素*/
			ol li:nth-child(2n) {
				background-color: antiquewhite;
			}
			/*从第4个开始(包括4)到最后*/
			ol li:nth-child(n+4) {
				color: blue;
			}
			
			/*first-of-type*/			
			/*last-of-type*/
			/*nth-of-type(n) 对指定标签的元素排序后再选择第几个*/	
			/*nth-child(n) 先选取第n个子元素 再匹配标签*/

伪元素选择器

帮助利用CSS创建标签元素

• ::before 在元素内部的前面插入内容
• ::after 在元素内部的后面插入内容

特点：

1. 会新创建元素，属于行内元素
2. 新创建的元素在在文档树种找不到：伪元素
3. 语法 element::before {}
4. 必须有content属性
5. 权重为1

常用场景：字体图标

<div class="tubiao"></div>

			.tubiao {
				position: relative;
				width: 200px;
				height: 35px;
				border: 1px solid red;
			}
			.tubiao::after {
				position: absolute;
				top: 8px;
				right: 5px;
				font-family: 'icomoon';
				content: '';
				color: red;
				font-size: 20px;
			}
			.tubiao::before {
				position: absolute;
				top: 8px;
				left: 5px;
				font-family: 'icomoon';
				content: '\e95b';
				color: red;
				font-size: 18px;
			}

遮罩层显示隐藏-土豆视频播放案例

		<!--用伪元素方式-->
		<div class="tudo">			
			<img src="img/tudou.jpg" />
		</div>

			.tudo {
				position: relative;
				width: 450px;
				height: 300px;
				margin: 20px auto;
			}
			.tudo img {
				width: 100%;
				height: 100%;
			}			
			.tudo::before {
				content: '';
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0, .4) url(img/btn.png) no-repeat center;
			}
			.tudo:hover::before {
				display: block;
			}