CSS3学习笔记（七）——结构性伪类选择器

最新推荐文章于 2024-04-21 14:30:45 发布

Bambi12

最新推荐文章于 2024-04-21 14:30:45 发布

阅读量302

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Bambi12/article/details/84784282

版权

CSS 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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

Bambi12

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记（七）——结构性伪类选择器

1、:root 根选择器，等同于&lt;html&gt;元素:root{ background:orange;}html{ background:orange;}/*代码效果相同*/2、:not否定选择器，可以选择除某个元素之外的所有元素input:not([type="submit"]){ border:1px solid red...
复制链接

扫一扫

专栏目录