表单补充
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="get" enctype="text/plain"><!-- <input type="text" name="" id=""> --><!-- select下拉菜单 --><!-- multiple布尔型属性 表示 多选菜单 --><select name="city" id="city" multiple><option>西安</option><option>咸阳</option><option>宝鸡</option><option>渭南</option></select><button>提交</button></form></body>
</html>
属性选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>[class="first_div"]{width: 100px;height: 100px;background-color: aqua;}/* 以什么字符开头 */[class^="f"]{background-color: cadetblue;}/* 包含某个字符 */[class*="f"]{background-color: red;}/* 以什么结尾 */[class$="l"]{background-color: brown;}/* 下一个标签 */div[name="div"] + span{display: inline-block;width: 50px;height: 50px;background-color: azure;border: 1px dotted green;}</style></head><body><div id="first_div" class="first_div" name="div"></div><span></span><div></div><span></span><ol class = "first_ol"><li>1</li><li>2</li><li>3</li><li>4</li><li><ol ><li>1</li><li>2</li><li>3</li><li>4</li></ol></li></ol></body>
</html>
伪类选择器
伪类选择器：同一个标签可能拥有不同的状态，在不同的状态下进行样式设置，就是为了选择器的目的。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 访问过得标签 */a:visited{color: red;}/* 链接状态 */a:link{color: green;}/* 激活中状态 */a:active{color: rebeccapurple;}/* 鼠标悬停状态 */a:hover{/* font-size: 10px; */text-decoration: line-through;}a:active{}/* 聚焦状态 */a:focus{}</style></head><body><a href="#">这是一个a标签</a><br><a href="#1">这是ling一个a标签</a><br><a href="#3">这是又一个a标签</a><br></body>
</html>
伪元素选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 伪元素选择器 一定要写content样式，如果没有那么伪元素选择器不生效 */p::after{display: inline-block;content: "";width: 12px;height: 12px;border-radius: 50%;border: 1px solid red;align-items: center;background-color: red;}#p_label::first-letter{font-size: 20px;color: red;}#p_label::first-line{font-size: 20px;color: red;}p::selection{background-color: aquamarine;}</style></head><body><p id="p_label">床前明月光，疑是地上窗床前明月光，疑是地上窗床前明月光，疑是地上窗床前明月光，疑是地上窗床前明月光，疑是地上窗床前明月光，疑是地上窗床前明月光，疑是地上窗</p></body>
</html>
课堂练习
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table {width: 100%;max-width: 700px;}/* td:hover{width: 30%;} */a:link {color: green;}a:visited {color: black;}a:hover {font-size: 30px;}a:active {color: red;}/* table>tbody>tr>td:nth-child(odd) {border: 1px solid rebeccapurple;} *//* 拥有href属性的标签 *//* 1.#开头的加边框 *//* 2.3结尾的加背景色 *//* [href^='#']{border: 1px solid red;}[href$='3']{background-color: aqua;} */[width*='3'],[href*='3']{border: 1px solid red;}</style></head><body><h1>热门电影板块</h1><hr><table><tbody><tr><td><a href="#"><b>最近热门电影</b></a></td><td><a href="#1">最新</a></td><td><a href="#2">热门</a></td><td><a href="#3">豆瓣高分</a></td><td><a>冷门佳片</a></td><td><a>华语</a></td><td><a>欧美</a></td><td><a>韩国</a></td><td><a>日本</a></td><td><a>更多>></a></td></tr></tbody></table><hr><table><tr><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td></tr><tr><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td><td width="23%"><img src="./img/22.png" alt="" width="100%"><br>爱神 8.1</td></tr></table></body>
</html>
![[亲测有效]CentOS7下安装mysql5.7](http://pic.xiahunao.cn/[亲测有效]CentOS7下安装mysql5.7)
