属性选择器，结构伪类选择器以及后代选择器和子选择器

属性选择器

语法：

E[类型]{ }：给某一类型的元素设置样式

例子：

[type=password]{
            width: 500px;
            height: 60px;
            background-color: honeydew;
        }

注意：=后面不能有 “:”".""//"，如果必须要用，加引号。
缩小范围可加：

E[attr^=”value”]：设置sttr是以y开头的样式，其中sttr也可以是类，id，标签

例子：

	[clss^="y"]{
            border: 2px solid blueviolet;
        } 

E[attr$=”value”]：以x结尾的样式

例子：

[class$="x"]{
            border:2px solid brown;
        }

E[attr*=”value”]：设置类名中出现x的样式

[class$="x"]{
            border:2px solid brown;
        }

结构伪类选择器

/* 所有偶数行的样式 */
        p:nth-child(even){
            color: white;
            background-color: yellow;
        }

/* 所有奇数行的样式 */
        p:nth-child(odd){
            color: whitesmoke;
            background-color: yellowgreen;
        }

/* 第一行的样式 */
        p:first-child{
            color: azure;
            background-color: blueviolet;
        }

/* 最后一行的样式 */
        p:last-child{
            color: whitesmoke;
            background-color: blue;
        } 

/* 第一个子元素 */
        div:first-child{
            width: 300px;
            height: 250px;
            background-color: green;
        }

 /* 最后一个子元素 */
        div:last-child{
          width: 50px;
          height: 20px;
          background-color: cornflowerblue;
      } 

  /* 子元素只有一个 */
        p:only-child {
            width: 100px;
            height: 100px;
            color: cornflowerblue;
            background-color: yellow;
        } 

 /* 父元素中这类型的子元素只有一个 */
       h2:only-of-type {
            width: 100px;
            height: 100px;
            background-color: pink;
        } 

  /* 子元素是空白，空格也不能有 */
        div:empty{
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

UI状态选择器

/* 设置type属性为text禁用时的样式 */
        [type="text"]:disabled{
            background-color: lightcoral;
        }

/* 设置type属性为text正常时的样式 */
        [type="text"]:enabled{
            background-color: lightgreen;
        } 

	/* 设置type属性为checkbox点击时的样式 */
        [type="checkbox"]:checked{
            appearance: none;
            width: 14px;
            height: 14px;
            border: 1px solid slateblue;
            background-color: lightseagreen;
        } 

 /* 所有偶数行的样式 */
    p:nth-child(even){
        color: white;
        background-color: yellow;
    }
	
	/* 所有奇数行的样式 */
    p:nth-child(odd){
        color: whitesmoke;
        background-color: yellowgreen;
    }
    
 /* 第一行的样式 */
	 p:first-child{
        color: azure;
        background-color: blueviolet;
    }
    p:nth-child(4){
        font-size: 40px;
        color: chartreuse;
        background-color: cornflowerblue;
    }

 /* 最后一行的样式 */
 p:last-child{
            color: whitesmoke;
            background-color: blue;
        }

后代选择器

.wrap1>div{
            width: 300px;
            height: 200px;
 }

否定伪类选择器

:not() 除了什么什么 可以让你定位不匹配该选择器的元素

		input:not([type=text]){
            width: 100px;
            height: 60px;
            background-color: springgreen;
        }
        input:not(.pwd){
            width: 100px;
            height: 60px;
            background-color: red;
            margin-bottom: 20px;
        }

目标伪类选择器

:target 选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

全部可参考这个图