常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="练习.css">
<style>
</style>
</head>
<body>
<h1 id="op">CSS练习</h1>
<h3>什么是CSS</h3>
<p id="hix">自然段</p>
<p>自然段2</p>
无序列表
<ul type="circle">
<li>1</li>
<li class="cc">2</li>
<ol type="a">
<li>田所浩二</li>
<li>我是</li>
</ol>
<li style="color: blue">3</li>
</ul>
有序列表
<ol type="1">
<li>a</li>
<li style="color: aqua">b</li>
<li>c</li>
</ol>
<div>你是那个省的</div>
<p>我是妈妈生的</p>
<p>雪豹闭嘴</p>
<div>你喜欢什么样的电子烟</div>
<p>瑞克五代！</p>
<p>传统香烟</p>
自定义列表
<dl>
<dt>你是一个一个什么</dt>
<dd>我是田所浩二</dd>
<dt>年龄是什么，在做什么工作</dt>
<dd>24岁，是学生</dd>
</dl>
<div>可以通过CSS对这些元素进行格式化</div>
<span>可以CSS和JavaScript操作</span>
<div>div标签自动换行</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li[title = "dsa"]{color: blueviolet}
li[class ~= "aa"]{color: red}
li[class |= "aa"]{color: blue;background-color: red}
li[class ^= "a"]{background-color: aqua}
li[class $= "bb"]{background-color: black}
p.cc:first-letter{color: burlywood;font-size: 30px;}
h1::before{content: "HELLLO "}
h1::after{content: " 选择器"; color: burlywood ; background-color: aqua}
ul li:nth-child(2){color: aqua}
ul p:first-of-type{color: blue}
ul li:not(.cc){background-color: red}
* ul li:hover{color: chartreuse}
</style>
</head>
<body>
<ol type="1">
<li class="aa bb" title="dsa">123</li>
<li class="vv cc" title="ds">456</li>
<li class="aa-bb" title="s">789</li>
</ol>
<h1>CSS选择器伪类</h1>
<p class="cc">你是一个一个一个一个啊啊啊啊啊啊啊啊啊啊啊</p>
<ul>
<li class="cc">苏不大舒服的环境撒赖咖啡碱和</li>
<p>这是一个自然段</p>
<p>这是一个自然段</p>
<p>这是一个自然段</p>
<li>啊速度啦大家ask来得及阿拉斯加的啦时间</li>
<li>啊速度啦大家ask来得及阿拉斯加的啦时间</li>
<li>啊速度啦大家ask来得及阿拉斯加的啦时间</li>
<li>十大回家了多久啊螺丝扣家乐福尽快v农村</li>
</ul>
</body>
</html>