3.4 伪类选择器
伪类选择器用于向某些选择器添加添加特殊效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复合选择器之链接伪类选择器</title> <style> /* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */ a:link { color: #333; text-decoration: none; } /*2. a:visited 选择点击过的(访问过的)链接 */ a:visited { color: orange; } /*3. a:hover 选择鼠标经过的那个链接 */ a:hover { color: skyblue; } /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */ a:active { color: green; } </style> </head> <body> <a href="#">小猪佩奇</a> <a href="http://www.xxxxxxxx.com">未知的网站</a> </body> </html>
注意：a标签有默认样式，故如果给a标签设置样式需要具体指定
3.5 focus伪类选择器
谁获得光标，相应谁的文本发生变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>focus伪类选择器</title> <style> /* // 把获得光标的input表单元素选取出来 */ input:focus { background-color: pink; color: red; } </style> </head> <body> <input type="text"> <input type="text"> <input type="text"> </body> </html>
4. CSS的元素选择模式
html元素一般分为块元素和行内元素两种。
4.1 块元素
4.2 行内元素
4.3 行内块元素
4.4 各元素之间的转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>元素显示模式转换</title> <style> a { width: 150px; height: 50px; background-color: pink; /* 把行内元素 a 转换为 块级元素 */ display: block; } div { width: 300px; height: 100px; background-color: purple; /* 把 div 块级元素转换为行内元素 */ display: inline; } span { width: 300px; height: 30px; background-color: skyblue; display: inline-block; } </style> </head> <body> <a href="#">金星阿姨</a> <a href="#">金星阿姨</a> <div>我是块级元素</div> <div>我是块级元素</div> <span>行内元素转换为行内块元素</span> <span>行内元素转换为行内块元素</span> </body> </html>
