高级选择器分为：
后代选择器
子代选择器
并集选择器
交集选择器
后代选择器
使用空格表示后代选择器 , 顾名思义 父元素的后代(包括儿子,孙子,重孙子)
中间空格隔开 是后代 ?1 .container p{2 ????color: red; ???????3 }4 .container .item p{5 ????color: yellow;6 }子代选择器
使用> 表示子代选择器 , 比如 div>p , 仅仅表示的是当前 div 元素选中的子代(不包含孙子.....) 元素p.
1 .container>p{2 ????color: yellowgreen;3 }并集选择器
多个选择器之间使用逗号隔开, 表示选中的页面中的多个标签. 一些共性的元素, 可以使用并集选择器
1 /*并集选择器*/2 h3,a{3 ????color: #008000;4 ????text-decoration: none;5 ????????????????6 }比如想百度首页使用并集选择器.
1 ?body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {2 ??????margin: 0;3 ??????padding: 04 ???}5 /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/交集选择器
使用 .表示交集选择器. 第一个标签必须是标签选择器 , 第二个标签必须是类选择器
语法: div.active 比如有一个<h4 class= "active"></h4> 这样的标签
那么
1 h4{ 2 ????width: 100px; 3 ????font-size: 14px; 4 } 5 .active{ 6 ????color: red; 7 ????text-decoration: underline; 8 } 9 /* 交集选择器 */10 h4.active{11 ????background: #00BFFF;12 }他表示两者选中之后元素共有的特性
属性选择器 *****
属性选择器, 字面意思就是根据标签中的属性 , 选中当前的标签
语法:
/*根据属性查找*/ 2 ????????????/*[for]{ 3 ????????????????color: red; 4 ????????????}*/ 5 ?????????????6 ????????????/*找到for属性的等于username的元素 字体颜色设为红色*/ 7 ????????????/*[for=‘username‘]{ 8 ????????????????color: yellow; 9 ????????????}*/10 ????????????11 ????????????/*以....开头 ?^*/ 12 ????????????/*[for^=‘user‘]{13 ????????????????color: #008000;14 ????????????}*/15 ????????????16 ????????????/*以....结尾 ??$*/17 ????????????/*[for$=‘vvip‘]{18 ????????????????color: red;19 ????????????}*/20 ????????????21 ????????????/*包含某元素的标签*/22 ????????????/*[for*="vip"]{23 ????????????????color: #00BFFF;24 ????????????}*/25 ????????????26 ????????????/**/27 ????????????28 ????????????/*指定单词的属性*/29 ????????????label[for~=‘user1‘]{30 ????????????????color: red;31 ????????????}32 ????????????33 ????????????input[type=‘text‘]{34 ????????????????background: red;35 ????????????}<head> ???<meta charset="UTF-8"> ???<title></title> ???<style>
/*举例*/ ???????form input[type=‘text‘]{ ???????????background-color: red; ???????} ???????form input[type=‘password‘]{ ???????????background-color: yellow; ???????} ???????form #user{ ???????????background-color: green; ???????????????????} ???</style></head><body> ???/*示例*/ ???<form action=""> ???????<input type="text" id="user"> ???????<input type="password"> ???</form></body></html>
伪类选择器
伪类选择器一般会用在超链接a标签中 , 使用a标签的伪类选择器, 我们一定要遵循 " 爱恨准则" LoVe HAte
1 ??????????????/*没有被访问的a标签的样式 ?link */ 2 ????????.box ul li.item1 a:link{ 3 ?????????????4 ????????????color: #666; 5 ????????} 6 ????????/*访问过后的a标签的样式 ????visited */ 7 ????????.box ul li.item2 a:visited{ 8 ?????????????9 ????????????color: yellow;10 ????????}11 ????????/*鼠标悬停时a标签的样式 ????hover */12 ????????.box ul li.item3 a:hover{13 ????????????14 ????????????color: green;15 ????????}16 ????????/*鼠标摁住的时候a标签的样式 ????active */17 ????????.box ul li.item4 a:active{18 ????????????19 ????????????color: yellowgreen;20 ????????}CSS3 中的选择器nth-child()
1 ??????????????/*选中第一个元素*/ 2 ????????div ul li:first-child{ 3 ????????????font-size: 20px; 4 ????????????color: red; 5 ????????} 6 ????????/*选中最后一个元素*/ 7 ????????div ul li:last-child{ 8 ????????????font-size: 20px; 9 ????????????color: yellow;10 ????????}11 ????????12 ????????/*选中当前指定的元素 ?数值从1开始*/13 ????????div ul li:nth-child(3){14 ????????????font-size: 30px;15 ????????????color: purple;16 ????????}17 ????????18 ????????/*n表示选中所有,这里面必须是n, 从0开始的 ?0的时候表示没有选中*/19 ????????div ul li:nth-child(n){20 ????????????font-size: 40px;21 ????????????color: red;22 ????????}23 ????????24 ????????/*偶数*/25 ????????div ul li:nth-child(2n){26 ????????????font-size: 50px;27 ????????????color: gold;28 ????????}29 ????????/*奇数*/30 ????????div ul li:nth-child(2n-1){31 ????????????font-size: 50px;32 ????????????color: yellow;33 ????????}34 ????????/*隔几换色 ?隔行换色35 ?????????????隔4换色 就是5n+1,隔3换色就是4n+136 ????????????*/37 ????????38 ????????div ul li:nth-child(5n+1){39 ????????????font-size: 50px;40 ????????????color: red;41 ????????}伪元素选择器
/*设置第一个首字母的样式*/ ???????p:first-letter{ ???????????color: red; ???????????font-size: 30px; ???????} ???????/* 在....之前 添加内容 ??这个属性使用不是很频繁 了解 ?使用此伪元素选择器一定要结合content属性*/ ???????p:before{ ???????????content:‘alex‘; ???????} ???????????????/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ ???????p:after{ ???????????content:‘&‘; ???????????color: red; ???????????font-size: 40px; ???????} 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 ????<style> 7 ????????p:first-letter{ 8 ????????????color: red; 9 ????????????font-size: 26px;10 ????????}11 ????????/*用伪元素 属性一定是content*/12 13 ????????/*伪元素选择器与后面的布局有很大关系*/14 ????????p:before{15 ????????????content: ‘$‘16 ????????}17 ????????p:after{18 ????????????content: ‘.‘19 ????????}20 ????????.box2{21 22 ????????????/*需求：这个盒子一定是块级标签 ?span==>块 并且不再页面中占位置。未来与布局有很大关系 */23 24 ????????????/*隐藏元素 不占位置*/25 ????????????/*display: none;*/26 ????????????display: block;27 ????????????28 ????????????/*display: none;*/29 ????????????/*隐藏元素 占位置*/30 ????????????visibility: hidden;31 ????????????height: 0;32 33 ????????}34 35 ????</style>36 </head>37 <body>38 ????<p class="box">39 ????????<span>alex</span>40 ????</p>41 42 ????<span class="box2">alex</span>43 ????<div>wusir</div>44 ????45 </body>46 </html>03-CSS中的选择器
原文地址：https://www.cnblogs.com/heshun/p/9670092.html