WEB前端伪类选择器以及伪元素选择器

表单补充

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<form action="#" method="get" enctype="text/plain">
			
			
			
			<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>1li>
			<li>2li>
			<li>3li>
			<li>4li>
			<li>
				<ol >
					<li>1li>
					<li>2li>
					<li>3li>
					<li>4li>
				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>

你可能感兴趣的:(前端)