一、关系选择器
1、E+F （E元素下一个满足条件的兄弟元素节点）
1 <style> 2 ?????div + p{ 3 ?????????background-color:red;// 第一个p元素变色 4 ?????} 5 </style> 6 <body> 7 ????<div>div</div> 8 ????<p>1</p> 9 ????<p>2</p>10 ????<p>3</p>11 </body> 1 <style> 2 ?????div + .demo{ 3 ?????????background-color:red;// 第一个p元素变色 4 ?????} 5 </style> 6 <body> 7 ????<div>div</div> 8 ????<p class="demo">1</p> 9 ????<p>2</p>10 ????<p>3</p>2、E~F （E下所有满足条件的兄弟元素节点）
二、属性选择器
1、E[att~=“val”]
2、E[att | =“val”] （以val为开头 或 以val- 为开头的元素）
<style> ????div[class|=‘a‘]{ ????????background-color:red; //1、2变色 ????}</style><body> ???<div class="a">1</div> ???<div class="a-test">2</div> ???<div class="b-test">3</div>3、E[att^=“val”]
4、E[att$=“val”]
5、E[att*=“val”]
三、伪元素选择器
1、E::placeholder （注意兼容性）
<style> ????input{ ????????border:1px solid black; ????} ????input::placeholder{ ????????color:orangered; //改变一下“请输入用户名”字体颜色 ????}</style><body> ???<input type="text" placeholder="请输入用户名"></body>2、E::selection
四、伪类选择器 （被选择元素的一种状态）
1、E:not (s) :root （跟标签选择器，包含html） E:target
<style> ????div:not(.test){ ????????background-color:red; ????}</style><body> ???<div class="demo">1</div> ???<div class="demo">2</div> ???<div class="test">3</div></body> ????//或写成 ????div:not([class="demo"]){ ????????background-color:red; ????}not应用实例：
<style> ????*{ ????????margin:0; ????????padding:0; ????} ????ul{ ????????width:300px; ????????border:1px solid #999; ????} ????????????????????????????????????????????????????????????li{ ????????height:50px; ????????margin:0 5px; ????} ????li:not(:last-of-type){ ????????border-bottom:1px solid black; ????}</style><body> ???<ul> ???????<li>content</li> ???????<li>content</li> ???????<li>content</li> ???????<li>content</li> ???????<li>content</li> ???????<li>content</li> ???????<li>content</li> ???</ul></body> ?
//效果如下<style> ????div:target{ ???????border:1px solid black; ????} ????/* location.hash = xxx ??（被标记成锚点之后） */</style><body> ???<a href="#box1">div1</a> ???<a href="#box2">div2</a> ???<div id="box1">1</div> ???<div id="box2">2</div></body>
小练习：
2、E:first-child E:last-child E:only-child E:nth-child (n) E:nth-last-child (n) （这些元素都考虑其他子元素的影响）
<style> ????P:first-child{ ????????background-color:red; ????}</style><body> ???<div> ???????<p>1</p> ???????<p>2</p> ???????<p>3</p> ???</div></body><style> ????P:first-child{ ????????background-color:red;//第一个p元素不会变红，因为第一个子元素是span ????}</style><body> ???<div> ???????<span>5</span> ???????<p>1</p> ???????<p>2</p> ???????<p>3</p> ???</div><style> ???p:nth-child(2n+1){ ???????background-color:red;//1、3、5变色 （css从1开始查） ???}</style><body> ???<div> ???????<p>1</p> ???????<p>2</p> ???????<p>3</p> ???????<p>4</p> ???????<p>5</p> ???</div>3、E:first-of-type E:last-of-type E:only-of-type
4、E:nth-of-type(n) E:nth-of-last-type(n)
5、E:empty E:checked E:enabled E:disabled
6、E:read-only E:read-write
css3选择器补充
原文地址：https://www.cnblogs.com/tianya-guoke/p/10231023.html