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>
/* 标签选择器=========================== */
/* p {
background-color: red;
}
div {
width: 300px;
background-color: royalblue;
} */
/* 类选择器===================================== */
/* .abc {
background: royalblue;
}
.efg {
color: white;
} */
/* id选择器====================================== */
/* #divDog {
color: yellow;
} */
/* 通配符选择器================================== */
/* * {
color: red;
} */
/* 后代选择器.语法规范：元素1 元素2{样式声明} =============================
1、元素1和元素2用空格隔开,
2、元素1是父级，元素2是子级，修改的是子级的样式
3、元素2可以是孩子也可以是孙子，只要是元素1的后台即可
4、元素1和元素2可以是任意基础选择器*/
/* ol li {
color: red;
}
.dog li a {
color: rgb(40, 75, 34);
} */
/* 子元素选择器=================================
选择最近的子元素，亲儿子
*/
/* .nav>a {
color: red;
} */
/* 并集选择器,=================================================
1元素1和元素2用逗号分隔
2任何形式的选择器都可以作为并集选择器的一部分*/
/* div,
p,
.pig li {
color: red;
} */
/* 链接伪类选择器 ,按照LVHA的顺序声明===================================*/
/* 1.未访问的链接,把没有点击过的选择出来 */
/* a:link {
color: red;
text-decoration: none;
} */
/* 点击过的链接 */
/* a:visited {
color: black;
} */
/* 鼠标经过 */
/* a {
color: gray;
text-decoration: none;
}
a:hover {
color: skyblue;
text-decoration: underline;
} */
/* 鼠标正在按下没有弹起来 */
/* a:active {
color: green;
} */
/* focus 伪类选择器============================================ */
/* input:focus {
background: yellow;
} */
/* 属性选择器=========================================== */
/* input[type] {
background: red;
}
div[class^=icon] {
background: red;
}
div[class$=data] {
color: red;
}
div[class=icon1] {
color: red;
background: yellow;
}
div[class*=ic] {
color: red;
} */
/* 结构伪类选择器====================================== */
/* 1.选择ul里面的第一个孩子 */
/* ul li:first-child {
background-color: red;
} */
/* 2.选择ul里面的最后一个孩子 */
/* ul li:last-child {
background-color: red;
} */
/* 3.选择ul里面的第3个孩子 */
/* ul>li:nth-child(3) {
background-color: darkblue;
} */
/* 4.nth-child(n)选择某个父元素的一个或多个特定的子元素
n可以是数字,关键字或公式
n如果是数字,就是选择第n个子元素,数字从1开始
n可以是关键字,even是偶数,odd是奇数
n可以是公式 (如果n是公式,则从0开始计算,但是第0个元素或者超出了元素个数会被忽略)*/
/* ul li:nth-child(even) {
background-color: darkcyan;
}
ul li:nth-child(odd) {
color: pink;
} */
/* 从第三个开始,到最后 */
/* ul li:nth-child(n+3) {
background: red;
} */
/* 前三个 */
/* ul li:nth-child(-n+3) {
background: black;
} */
/* 3,6,9 */
/* ol li:nth-child(3n) {
background: red;
} */
/* nth-child会把所有的盒子都排列序号
执行的时候先看 :nth-child(1) 之后再看前面的div */
/* section div:nth-child(1) {
background: red;
} */
/* nth-of-type会把指定元素盒子排列序号
执行的时候先看 :nth-child(1) 之后看前面div */
/* section div:nth-of-type(1) {
background: red;
} */
/* 伪元素选择器 */
/* q::before {
content: '<<';
color: blue;
}
q::after {
content: ">>";
color: red;
} */
style>
head>
<body>
body>
html>