<!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>Document</title>
<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>
<!-- /* 标签选择器============================ */ -->
<!-- <p>dog</p>
<p>dog</p>
<div>aaaa</div>
<div>aasdfasdf</div> -->
<!-- 类选择器 =============================-->
<!-- <div class="abc">asldkfjlasdfj</div>
<ul>
<li>assdfasef</li>
<li class="abc efg">asdf</li>
</ul> -->
<!-- id选择器 =========================-->
<!-- <div id="divDog">dog</div>
<div>aslkdfjalskd</div> -->
<!-- 通配符选择器====================================== -->
<!-- <div>
dog
</div>
<ul>
<li>saldfj</li>
<li>asldkf</li>
</ul> -->
<!-- /* 后代选择器.语法规范：元素1 元素2{样式声明} ===================================
1、元素1和元素2用空格隔开,
2、元素1是父级，元素2是子级，修改的是子级的样式
3、元素2可以是孩子也可以是孙子，只要是元素1的后台即可
4、元素1和元素2可以是任意基础选择器*/ -->
<!-- <ol>
<a href="#">lasjdflasjdf</a>
<li>fasdlkfj</li>
<li>asdfasdf</li>
<li><a href="#">asdfassdf</a></li>
</ol>
<ol class="dog">
<a href="#">lasjdflasjdf</a>
<li>fasdlkfj</li>
<li>asdfasdf</li>
<li><a href="#">asdfassdf</a></li>
</ol>
<ul>
<li>alsdjkflads</li>
</ul> -->
<!-- /* 子元素选择器=====================================
选择最近的子元素，亲儿子
*/ -->
<!-- <div class="nav">
<a href="#">dog1</a>
<p><a href="#">dog2</a></p>
</div> -->
<!-- 并集选择器,元素1和元素2用逗号分隔===================================== -->
<!-- <div>abc</div>
<p>saldkjflaskdf</p>
<ul class="pig">
<li>
asdf
</li>
<li>
asdf
</li>
</ul> -->
<!-- /* 链接伪类选择器 ,按照LVHA的顺序声明========================================*/
/* 1.未访问的链接,把没有点击过的选择出来 */ -->
<!-- <a href="#">小猪佩奇</a>
<a href="#">你好</a>
<a href="http://www.baidu.com">百度</a> -->
<!-- focus 伪类选择器=============================================== -->
<!-- <input type="text">
<input type="text">
<input type="text"> -->
<!-- 属性选择器================================================== -->
<!-- <input type="text">
<div class="icon1">asldkjf</div>
<div class="icon2">asldkfj</div>
<div class="asd">asldkfj</div>
<div class="icon-data1">asdlkf</div>
<div class="icon-data2">asdlkfj</div>
<div class="ic1on-asldf">asdfasdfafd</div> -->
<!-- /* 结构伪类选择器====================================== */ -->
<!-- <ul>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
</ul>
<ol>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
</ol> -->
<!-- <section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section> -->
<!-- 伪元素选择器 -->
<!-- <q>asdfasdf</q> -->
</body>
</html>
