标签：鼠标悬停 hidden red 布局 了解 NPU 空格 a标签 :hover
使用空格表示后代选择器 , 顾名思义 父元素的后代(包括儿子,孙子,重孙子)
中间空格隔开 是后代 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: 0 4 } 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+1 36 */ 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>
标签：鼠标悬停 hidden red 布局 了解 NPU 空格 a标签 :hover
原文地址：https://www.cnblogs.com/heshun/p/9670092.html
