css的选择器记录（持续更新）

官网文档：https://www.runoob.com/cssref/css-selectors.html

1,::before和::after

::before :在某某元素之前插入内容
::after :在某某元素之后插入内容

简单实例

            <span class="before">beforeAndAfter</span>
            .before{
				color: red;;
			}
			.before::before{
				content: '在beforeAndAfter你之前插入';
				color: #008000;
			}
			.before::after{
				content: '在beforeAndAfter你之后插入';
				color: aqua;
			}

间隔符号用法

               <nav>
				<ul>
					<li>HTML 5</li>
					<li>CSS 3</li>
					<li>JAVASCRIPT</li>
				</ul>
			</nav>

               ul{
					list-style: none;
			  }
			  ul li{
				  float: left;
			  }
			  li::after{
				  content: '|';
				  margin: 0px 6px;
			  }
			  ul li:last-child::after {
			        content: "";     
			  }

//:last-child 选择每个p元素是其父级的最后一个子级。
//:first-child 指定只有当

元素是其父级的第一个子级的样式。

简单发光

                <div class="pulse">
        <div class="ring"></div>
        <div class="ring"></div>
    </div>
                .pulse {
            background-color: coral;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            position: relative;
        }

        .ring {
            position: absolute;
            background-color: inherit;
            height: 100%;
            width: 100%;
            border-radius: 100%;
            opacity: 0.8;
            animation: pulsing 2s linear infinite;
        }

        .ring:nth-of-type(1) {
            animation-delay: -0.5s;
        }

        @keyframes pulsing {
            100% {
                transform: scale(1.75);
                opacity: 0;
            }
        }

疑问框

<div class="rectangle">疑问框</div>
		<style>
			/*圆角矩形*/
			.rectangle {
			    width: 200px;
			    border-radius: 5px;
				padding: 20px;
				background-color: #FF0000;
			    position: relative;
				text-align: center;
			}
			 
			/*小三角*/
			.rectangle::before {
			    content: "";
			    width: 0;
			    height: 0;
			    border: 15px solid red;
			    border-color: red transparent transparent transparent;
			    position: absolute;
			    bottom: -30px;
			    left: 100px;
			}
		</style>

4，dom的几种状态
1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态

5，:nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值