hover效果的选择器
伪类选择器
1 <style> 2 a:hover{color: red;} 3 a:active{font-size: 16px;} 4 a:visited{color: limegreen;font-family: 华文行楷;} 5 a:link{background-color: #800080;} 6 .box{ 7 width: 100px; 8 height: 100px; 9 background-color: #00FF00; 10 } 11 .box:hover{background-color: red;} 12 </style> 13 </head> 14 <body> 15 <!-- 16 之前所学伪类 17 link:未访问过的链接; 18 active:点击时的链接; 19 visited:访问过的链接; 20 hover:悬停; 21 这四种选择器都是以 :开头 而且都是用于a标签 22 hover 是适用于所有的元素 23 伪类选择器是可以单独使用的 只是我们一般不会单独使用 24 --> 25 26 <!-- JavaScript:void(0) 是阻止a标签的默认的跳转 那么就相当于a标签没有访问过后的状态 27 加JavaScript:(0) 不会有visited后的样式 --> 28 29 <!-- 交集选择器 --> 30 <!-- 交集选择器：必须同时满足满足类名，又要满足鼠标悬停时，才会给这个样式 --> 31 <a href="#">跳转</a> 32 <div class="box">box盒子</div> 33 <!-- 并集选择器 --> 34 <!-- 并集选择器 任意满足一个就给样式 --> 35 </body>
伪元素选择器
1 <style> 2 .box{ 3 width: 200px; 4 height: 200px; 5 background-color: pink; 6 } 7 .box::before{ 8 /* 在每个元素之前插入内容 使用伪元素必须要有content属性 */ 9 content: "我是一个伪元素"; 10 /* 宽高未设置是行内元素 */ 11 width: 100px; 12 height: 50px; 13 background-color: #FFD700; 14 } 15 .box::after{ 16 content: "我是后面插入的内容"; 17 } 18 p::first-letter{ 19 /* 找到首字母 以前的做法是找到一个标签把首字母包起来 单独设置样式 */ 20 font-size: 40px; 21 } 22 p::first-line{ 23 /* 找到第一行 无论屏幕大小怎么变 都是选中第一行 */ 24 background-color: #00FF00; 25 } 26 /* 设置选中的样式 */ 27 p::selection{ 28 color: blue; 29 background-color: #800080; 30 } 31 /* placeholder 获取到的 本质是文本，所以只有针对文本的样式适用， 对于元素的样式 是不适用的*/ 32 #userName: :placeholder { 33 color: red; 34 font-size: 18px; 35 background-color: green; 36 margin-left: 20px; 37 } 38 </style> 39 </head> 40 <body> 41 <!-- 什么是伪元素选择器 伪元素选择器就是用来添加一些选择器的特殊效果--> 42 <!-- 伪元素选择器 使用两个冒号开头 43 伪元素默认是行内元素 而且要使用伪元素必须要有content属性 --> 44 <div class="box">我是盒子</div> 45 <p>我是p标签</p> 46 </body>
