H5新特性 - CSS选择器

CSS选择器（续集）

是在原先的CSS基础上延伸出来的，为了更方便、快捷的选中元素，有利于开发人员的开发

• div+p
  紧邻选择器：div后面紧邻的第一个p标签

• div[id]
  所有带有id属性的div(不考虑id名字是什么)

• p[class=box]
  所有class类名为box的p标签

• div[class~=box]
  所有class名中包含box的div格式

	div[class~=box]{
		background-color: green;	
	}
	
	<div class="box" style="display: inline-block;"></div>
	<div class="box a" style="display: inline-block;"></div>
	<div class="box po" style="display: inline-block;"></div>
	

• div[class|=en]
  所有class类名中以en开头的div
  格式必须 en-glish
  直接englishe不生效

	[name|=en]{
		background: red;
	}
	
	<div name="en-lish" style="display: inline-block;"></div>
	<div name="english" style="display: inline-block;"></div>
	

• div[class^=u]
  所有class类名以u开头的div

	div[class^=u]{
		background-color: purple;
	}
	
	<div class="use" style="display: inline-block;"></div>
	<div class="user" style="display: inline-block;"></div>
	<div class="use-name" style="display: inline-block;"></div>
	<p class="use-name" style="width: 100px;height: 100px;border: 1px solid;"></p>
	

• div[class$=r]
  所有class类名以r结尾的div

	div[class$=r]{
		display: inline-block;
		color: red;
	}
	
	<div class="user">后悔</div>
	<div class="marker">绝望</div>
	<p class="user" >123</p>
	

• div[class*=o]
  所有class类名包含o的div

	div[class*=o]{
		color: white;
		background-color: #BE1E31;
		display: inline-block;
		text-align: center;
		font-size: 20px;
	}
			
	<div class="cook">皓月</div>
	<div class="col">美人</div>
	

• : link
  选择器用于选取未被访问的链接
• : visited
  选择器用于选取访问过的链接
• : active
  选取正在点击的链接（设置链接点击效果）

	a:link{
		color: forestgreen;
	}
	a:visited{
		color: purple;
	}
	a:active{
		font-size: 24px;
	}
			
	<a href="../音乐视频/播放器修改版.html">234</a>
	<a href="css选择器.html">cs</a>

• :after
  选中元素后面插入内容
• :before
  选中元素前面插入内容

	#me:before{
		content: "你好,";
	}
	#me:after{
		content: "朋友!";
	}

	<span id="me">我的</span>

	/* :first-letter 选择每个元素的首字母*/
	p:first-letter{
		font-size: 40px;
	}
	
	/* :first-line 选择每个元素的首行*/
	div:first-line{
		color: red;
	}
	
	/* :first-child 选择属于其父元素的首个子元素*/
	.one:first-child{
		border: 1px solid;
		height: 20px;
	}

• 单一类型

	/* p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素*/			
	body div:first-of-type{
		display: none;
	}
	/* p:last-of-type 指定父元素的最后一个 p 元素*/

	/* p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 */
			
	/* p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素 */
			
	/* p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数 */

• 多类型

	/* p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素*/
			
	/* p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素 */
			
	/* p:nth-last-child(2)	同上，从最后一个子元素开始计数 */
			
	/* first-child 匹配父元素下第一个子元素*/
			
	/* p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素 */
			
	/* :root	选择文档的根元素 */
			
	/* p:empty	选择没有子元素的每个 <p> 元素（包括文本节点 */
			
	/* #news:target	选择当前活动的 #news 元素 */
			
	:target{
		background: red;
	}
			
	/* input:enabled	选择每个启用的 <input> 元素 */
			
	/* input:disabled	选择每个禁用的 <input> 元素 */
			
	/* input:checked	选择每个被选中的 <input> 元素 */
			
	/* ::selection	选择被用户选取的元素部分 */
			
	::selection{
		background:red;
	}

• :not( p)设置非 <p> 元素的所有元素
  开启该案例会使得所有的元素隐藏

	/*:not(p){
		display: none;
	}*/