选择器和伪元素
目标选择器
div > p：选择 div 的直接子代 p。
div + p：选择 div 后紧跟着的 p。
a[target]：通过 a 标签的 target 属性设置样式。
input[type="text"]：根据 input 的 type 属性值来设置样式，给 type 值是 text 的 input 设置样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* div > p 选择div的直接子代p */
div>p {
background: cyan;
}
/* div + p div后紧跟着的p 下一个兄弟元素 */
div+p {
background: gray;
}
/* 通过 a 标签的 target 属性来设置样式 */
a[target] {
background-color: red;
}
/* 根据 input 的 type 属性值来设置样式，给 type 值是 text 和 email 的 input 设置样式 */
input[type="text"],
input[type="email"] {
width: 100%;
margin-bottom: 5px;
}
style>
head>
<body>
<div>
<p>Lorem ipsum dolor sit amet.
<ul>
<li>Item 1li>
<li>
<p>Item 2p>
li>
<li>Item 3li>
p>
ul>
<p>Lorem ipsum dolor sit amet.p>
div>
<p>Lorem ipsum dolor sit amet.p>
<p>Lorem ipsum dolor sit amet.p>
<br>
<a href="#">第一页a>
<a href="#">第二页a>
<a href="http://www.baidu.com" target="_blank">百度a>
<form>
<input class="input" type="text">
<input class="input" type="email">
<input class="input" type="submit">
form>
body>
html>
结构性伪类选择器
li:first-child：选择父元素的第一个子 li 元素。
li:last-child：选择父元素的最后一个子 li 元素。
li:nth-child(n)：选择第 n 个 li。
li:nth-child(nn)：选择 n 的倍数。
li:nth-child(nn+7)：从第 7 个开始按 n 的倍数。
li:nth-child(odd)：选择奇数
li:nth-child(even)：选择偶数
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构性伪类选择器 nth-child title>
<style>
li {
margin: 0.25rem;
padding: 0.25rem;
list-style: none;
}
/* 选择父元素的第一个子li元素 -- 需要有同一个父元素 */
li:first-child {
background-color: red;
}
/* 选择父元素的最后一个子li元素 -- 需要有同一个父元素 */
li:last-child {
background-color: red;
}
/* 选择第三个 li !important：最高级 */
li:nth-child(3) {
background-color: purple !important;
}
/* 选择3的倍数 */
li:nth-child(3n) {
background-color: orange;
}
/* 从第七个开始按3的倍数 */
li:nth-child(3n+7) {
background-color: yellow;
}
/* 选择奇数 */
li:nth-child(odd) {
color: cyan;
}
/* 选择偶数 */
li:nth-child(even) {
color: blue;
}
style>
head>
<body>
<ul>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
<li>Item 8li>
<li>Item 9li>
<li>Item 10li>
<li>Item 11li>
<li>Item 12li>
<li>Item 13li>
<li>Item 14li>
<li>Item 15li>
<li>Item 16li>
<li>Item 17li>
<li>Item 18li>
<li>Item 19li>
<li>Item 20li>
ul>
body>
html>
befor & after 伪元素
before：在元素前面追加内容，追加的内容放到 content 里
after：在元素后面追加内容，追加的内容放到 content 里
伪元素是一个虚假的元素，但在表现形式上和真正的元素没有区别
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>before & after 伪元素title>
<style>
/* ::after -- 在元素后面追加内容 */
/* ::before -- 在元素前面追加内容 */
/* 追加的内容放在 content 里 */
.required::after {
content: '*';
color: red;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #FFF;
margin: 0;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
header::before {
content: '';
background: url('./index3.jpg') no-repeat center center/cover;
opacity: .5;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
header>h1 {
font-size: 4rem;
margin: 1rem;
}
style>
head>
<body>
<header>
<h1>欢迎来到欧青辣少h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, eius.p>
header>
<section>
<h3>Lorem, ipsum dolor.h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus amet sequi ut mollitia est velit impedit! Odio in
nulla exercitationem dolorum vero quam, saepe dignissimos facere architecto, est repellat harum!p>
section>
body>
html>