<!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>