<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*子选择器*/ div p { color: red; } /*父级选择器*/ div > p { border: 1px solid; } /*属性选择器*/ input[type=‘text‘] { border: 5px solid #0368e5; } /*a标签初始状态*/ a：link { color: pink; } /*鼠标悬浮*/ a：hover { color: green; } /*鼠标点击*/ a：active { color: yellow; } /*鼠标点击之后*/ a：active { color: red; } </style></head><body><!--扩展选择器 #选择所有元素:*{} #并集选择器:选择器1,选择器2{} #子选择器:选择器1 选择器2{} #父选择器:选择器1>选择器2{} #属性选择器:选择元素名称,属性名=属性值的元素 元素名称[属性名="属性值"]{} #伪类选择器：选择一些元素具有的状态 元素:状态{}--><div> <p>传智播客</p></div><p>黑马程序员</p><input type="text"><input type="password"><br><a href="#">传智播客</a></body></html>
