|
|
@@ -0,0 +1,95 @@
|
|
|
+<!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>
|
|
|
+ /* div 后面的第一个p标签 */
|
|
|
+ /* div + p{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* div 后面所有的p标签 */
|
|
|
+ /* div ~ p{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* li带有class的标签 */
|
|
|
+ /* li[class] {
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* li[class='a']{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* 只包含a */
|
|
|
+ /* li[class~='a']{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* 首字母为a */
|
|
|
+ /* li[class^='a']{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* 包含a */
|
|
|
+ /* li[class*='a']{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* 结尾为b */
|
|
|
+ /* li[class$='b']{
|
|
|
+ background: #000;
|
|
|
+ } */
|
|
|
+
|
|
|
+
|
|
|
+ /* li:last-child{
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ */
|
|
|
+ /* li:nth-child(4){
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ /* li:nth-child(even){
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ li:nth-child(odd){
|
|
|
+ background: pink;
|
|
|
+ } */
|
|
|
+
|
|
|
+ #div1::after{
|
|
|
+ content: 'xixixi';
|
|
|
+ background: pink;
|
|
|
+ }
|
|
|
+ #div1::before{
|
|
|
+ content: 'hhehehehehhee';
|
|
|
+ background: green;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ id选择符
|
|
|
+ 元素选择符
|
|
|
+ class选择符
|
|
|
+ 关系选择符
|
|
|
+ 属性选择符
|
|
|
+ 伪类选择符
|
|
|
+ 伪对象选择符
|
|
|
+ -->
|
|
|
+ <p>0000000000</p>
|
|
|
+ <div>1111111111</div>
|
|
|
+ <p>22222222222</p>
|
|
|
+ <p>3333333333</p>
|
|
|
+ <p>44444444444</p>
|
|
|
+ <ul>
|
|
|
+ <li class="aa">11111</li>
|
|
|
+ <li class="a">22222</li>
|
|
|
+ <li class="ab">33333</li>
|
|
|
+ <li class="aa">44444</li>
|
|
|
+ <li class="b">555555</li>
|
|
|
+ <li class="ba">666666</li>
|
|
|
+ </ul>
|
|
|
+ <div id="div1">hahhahhhah</div>
|
|
|
+ <p>xxxxxx</p>
|
|
|
+</body>
|
|
|
+</html>
|
zsydgithub