在线课堂
通过在线课堂,您可以随时随地,学习最新的PHP开发知识。
通过在线课堂,您可以随时随地,学习最新的PHP开发知识。
Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!
- 根选择器
:root
- 否定选择器
:not
- 空选择器
:empty
- 目标选择器
:target
- 第一个与最后一个子元素
:first-child
:last-child
- 指定子元素选择器/奇偶选择器
:nth-child(n)
:nth-last-child(n)
- 第一个与最后一个匹配类型的子元素
first-of-type
last-of-type
- 指定匹配类型子元素选择器/匹配类型奇偶选择器
:nth-of-type(n)
:nth-last-of-type(n)
- 唯一子元素选择器
only-child
:root
:root{}
就等同于html{}
, 一般来说, 推荐使用:root{}
.
<style>
:root {
background:green;
}
</style>
<div>:root选择器的演示</div>
:not
否定选择器, 就是除此之外的
<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<div>
<label for="name">账号:</label>
<input type="text" name="name" id="name" placeholder="请填写账号" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请填写密码" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
:empty
注意: :empty
只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
<style>
div:empty {
border: 1px solid green;
}
</style>
<div>我这里有内容</div>
<div> <!-- 我这里有一个空格 --></div>
<div></div><!-- 我这里任何内容都没有 -->
:target
超链接地址, 与id
对应
<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h2><a href="#test">test</a></h2>
<div class="not_show" id="test">
这是一个测试
</div>
<style>
#pipi:target {
background: orange;
color: #fff;
}
#ruby:target {
background: blue;
color: #fff;
}
#aaron:target {
background: red;
color: #fff;
}
</style>
<h2><a href="#pipi">pipi</a></h2>
<div id="pipi">
content for pipi
</div>
<h2><a href="#ruby">ruby</a></h2>
<div id="ruby">
content for ruby
</div>
<h2><a href="#aaron">Brand</a></h2>
<div id="aaron">
content for aaron
</div>
:first-child
:last-child
<style>
ul li:first-child a {
color:green;
}
ul li:last-child a {
color:red;
}
</style>
<ul>
<li><a href="##">Link1</a></li>
<li><a href="##">Link2</a></li>
<li><a href="##">Link3</a></li>
<li><a href="##">Link4</a></li>
<li><a href="##">Link5</a></li>
</ul>
:nth-child(n)
:nth-last-child(n)
<style>
/*2n 偶数*/
ul li:nth-child(2n) {
color:green;
}
/* 用关键词 odd, 表示偶数, 效果同上
ul li:nth-child(odd) {
color:green;
}
*/
/*2n+1 奇数*/
ul li:nth-child(2n+1) {
color:red;
}
/* 用关键词 even, 表示奇数, 效果同上
ul li:nth-child(even) {
color:red;
}
*/
/* 指定子元素索引 */
ul li:nth-child(5) {
background: #08c;
}
/* 倒数第五个 */
ul li:nth-last-child(5){
background: yellow;
}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
first-of-type
last-of-type
<style>
.wrapper > p:first-of-type {
background: green;
}
.wrapper > p:last-of-type {
background: orange;
}
</style>
<div class="wrapper">
<div>我是一个块元素,我是.wrapper的第一个子元素</div>
<p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<div>我是一个块元素</div>
</div>
:nth-of-type(n)
:nth-last-of-type(n)
<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<div class="wrapper">
<div>我是一个Div元素</div>
<p>我是一个段落元素</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
<p>我是一个段落</p>
</div>
only-child
匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素
<style>
.post p:only-child {
background: orange;
}
</style>
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
only-of-type
<style>
.wrapper > div:only-of-type {
background: orange;
}
</style>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
<div class="wrapper">
<div>我是一个Div</div>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</div>