CSS3学习笔记(七)——结构性伪类选择器

1、:root     

根选择器,等同于<html>元素

:root{
    background:orange;
}
html{
    background:orange;
}

/*代码效果相同*/

2、:not

否定选择器,可以选择除某个元素之外的所有元素

input:not([type="submit"]){
    border:1px solid red;
}

3、:empty

用来选择没有任何内容的元素,没有任何内容表示什么都没有,甚至空格都没有

div:empty{
    min-height:30px;
    border:1px solid green;
    /*给没有内容的div添加一个1px的绿色边框*/
}

4、:target

目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素

html:

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">content for Brand</div>

css:

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

效果为最初不显示div内容,点击Brand标签后显示div中的内容

多个url(多个target)处理

<a href="#jack">跳转jack</a>
<div id="jack">jack</div>

<a href="#sparrow">sparrow</a>
<div id="sparrow">sparrow</div>
#jack:target{
	color: red;
}
#sparrow:target{
	color:blue;
}

5、:first-child

选择父元素的第一个子元素

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>
ul>li:first-child{
    color:red;
}

6、:last-child

选择父元素的最后一个子元素

ul>li:last-child{
    color:blue;
    border-bottom:none;/*删除最后一个子元素的底边框*/
}

7、:nth-child(n)

选择父元素的一个或多个特定的子元素

“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

ul>li:nth-child(2n-1){
	background-color: orange;
}
ul>li:nth-child(even){
	background-color: blue;
}

8、:nth-last-child(n)

从某父元素的最后一个子元素开始计算,来选择特定的元素

ul > li:nth-last-child(5){
  background: orange;
  /*倒数第五个背景色为橘色*/
}

9、:first-of-type     用法同:first-child

选择父元素下的某个类型的第一个子元素

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <div>我是第三个Div元素</div>
  <div>我是第四个Div元素</div>
</div>
.wrapper>p:first-of-type{
    color:purple;
}

10、:last-of-type     用法同:last-child

.wrapper > p:last-of-type{
  background: orange;
}

11、:nth-of-type(n)     用法同:nth-child(n)

.wrapper>p:nth-of-type(odd){
    color:purple;
}

12、:nth-last-of-type(n)     用法同:nth-last-child(n)

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

13、:only-child     

选择父元素中有且仅有的子元素

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>
.post p:only-child {
  background: orange;
}

14、:only-of-type

<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>
.wrapper > div:only-of-type {
  background: orange;
}

笔记整理出自:https://www.imooc.com/learn/33

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值