伪类/伪元素选择符/选择器深入了解

最新推荐文章于 2024-04-16 12:23:43 发布

liuxmoo

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量1.5k

点赞数 1

分类专栏： html/css/css3 文章标签：伪类选择器选择符伪类选择器 css

本文链接：https://blog.csdn.net/xiaomizhou66a/article/details/80959016

版权

html/css/css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

伪类/伪元素选择符/选择器深入了解：

一、伪类选择符/选择器

CSS伪类是用来添加一些选择器的特殊效果。

就是给某个元素后面加上冒号然后加上需要的特殊修饰词选择到所需要的效果，或者是元素。

①元素使用伪类例如：a：link

②元素的类使用伪类例如：a.red:visited red是一个class类

又分为：

1、a链接伪类

2、普通元素伪类，例如p元素，div元素

3、input表单元素伪类

4、：root 文档的根元素，通常根元素是 <html>

按类型分：

伪类：通过选择器可以选择到一类元素，可能是0个，1个，多个，

伪元素：通过选择器可以选择到一个元素，例如：after ：before ：first-letter ：first-line

1、a元素：超链接伪类、超链接结合class类的伪类

超链接伪类

a:link {color:#FF0000;} /* 未访问的链接（就是鼠标没有放上去，没有做任何操作，呈现的效果）*/

a:visited {color:#00FF00;} /* 已访问的链接（就是鼠标已经放上去，并且点击之后，呈现的效果）*/

a:hover {color:#FF00FF;} /* 鼠标划过链接（就是鼠标已经放上去，呈现的效果） */

a:active {color:#0000FF;} /* 已选中的链接（就是鼠标已经放上去，点击的时候，鼠标没有松开的时候，呈现的效果）*/

这个伪类使用一定要按照顺序写，先是a：link，然后是a：visited，再然后是a：hover，最后是a：active

结合class类型的超链接伪类

a.classname:link {color:#FF0000;}

/* 未访问,且类型为classname的链接（就是鼠标没有放上去，没有做任何操作，呈现的效果）*/

a.classname:visited {color:#00FF00;}

/* 已访问且类型为classname的链接（就是鼠标已经放上去，并且点击之后，呈现的效果）*/

a.classname:hover {color:#FF00FF;}

/* 鼠标划过且类型为classname的链接（就是鼠标已经放上去，呈现的效果） */

a.classname:active {color:#0000FF;}

/* 已选中且类型为classname的链接（就是鼠标已经放上去，点击的时候，

鼠标没有松开的时候，呈现的效果）*/

代码：

<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

结果：具体结果需要鼠标操作得到体现

2、普通元素（非链接，非表单）：的伪类、结合class类的伪类

序号	示例	说明
①	p:empty	选择所有没有子元素，没有文本的p元素。适用p元素，也使用其他元素
②	p:first-of-type	选择每个父元素是元素的第一个p子元素。适用p元素，也适用其他元素通俗说：就是拥有父元素的第一次出现的p元素。如果换成其他元素就是其他元素
③	p:only-of-type	选择所有仅有一个子元素为p的元素，适用p元素，也适用其他元素通俗说：就是父元素中只有一个p元素（如果换成其他元素就是其他元素），这个p元素（如果换成其他元素就是其他元素）就会被选择到。
④	p:last-of-type	选择每个父元素是元素的最后一个p子元素。适用p元素，也适用其他元素通俗说：就是拥有父元素的最后一次出现的p元素（如果换成其他元素就是其他元素）
⑤	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素，适用p元素，也适用其他元素通俗说：
⑥	p:nth-of-type(2)	选择所有p元素第二个为p的子元素，适用p元素，也适用其他元素通俗说：
⑦	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
⑧	p:last-child	选择每个父元素是元素的最后一个p子元素。适用p元素，也适用其他元素。通俗说：就是拥有父元素的最后一个元素，如果是p元素（如果换成其他元素就是其他元素）就会被选择到。
⑨	p:only-child	选择所有仅有一个子元素的p元素，适用p元素，也适用其他元素。通俗说：就是父元素中只有一个子元素，如果是p元素（如果换成其他元素就是其他元素）就会被选择到。
⑩	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素，适用p元素，也适用其他元素通俗说：
⑪	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素，适用p元素，也适用其他元素通俗说：
⑫	p:first-letter	选择每个<p> 元素的第一个字母。适用p元素，也适用其他元素通俗说：
⑬	p:first-line	选择每个<p> 元素的第一行。适用p元素，也适用其他元素通俗说：
⑭	p:before	在每个<p>元素之前插入内容。适用p元素，也适用其他元素、通俗说：

⑮	p:after	在每个<p>元素之后插入内容。适用p元素，也适用其他元素、通俗说：
⑯	p:lang(it)	为<p>元素的lang属性选择一个开始值。适用p元素，也适用其他元素、通俗说：

2.1 p:empty

适用：适用于p元素，也适用于其他元素，修改元素名称即可。

说明：选择所有没有子元素，且没有文本！！！的p元素

选择到的元素个数：可以选择到 0个，1个，多个

代码：

div：empty，选择所有没有子元素，且没有文本的div元素，

  <style>
    div {
      width: 500px;
      height: 100px;
    }

    div:empty {
      background-color: brown;
    }
  </style>
</head>

<body>
  <div>
    <p>我有子元素！</p>
    <span>
      这是子元素
    </span>
  </div>
  <div></div>
</body>

结果展示：

注意的问题：

① 元素里面不能有文本，有文本就不是空元素，

② 元素里面不能有空格，空格也是文本，就不是空元素，

③空元素的闭标签不能换行，在编辑器里面，只要换行了，就会默认的在里面填入一个空格的空间，有空格也不是空元素

如下的文档就不会被当做是空元素

<div>有文本就不是空元素</div>

<div>

</div>

2.2 p:first-of-type

适用：适用于p元素，也适用于其他元素，修改元素名称即可。

说明：选择每个父元素是元素的第一个p子元素。适用p元素，也适用其他元素
通俗说：就是拥有父元素的第一次出现的p元素。如果换成其他元素就是其他元素

代码：

  <style>
    p:first-of-type {
      background: #ff0000;
    }
  </style>
</head>

<body>

  <h1>This is a heading</h1>
  <p>父元素body里面第一个出现的p元素</p>
  <p>The second paragraph.</p>
  <div>
    <p>父级div中第一个出现的p元素</p>
    <p>The fourth paragraph.</p>
    <span>
      <p>父级span里面第一个出现的p元素</p>
      <p>The fourth paragraph.</p>
    </span>
  </div>
</body>

结果展示：

注意的问题：后面解决？？？？？

① p元素不能与父元素是同类型元素，否则选取不到，也就是所p元素中的第一个p选取不到，为什么？？？？

② div元素可以与父元元素是同类元素，可以选择到，也就是说div元素中的第一个div可以选取到，为什么？？？

③span元素可以与父元素是同类元素，可以选择到，也就是说span元素中的第一个span可以选择到，为什么？？？

代码：

 <style>
    p:first-of-type {
      background: blue;
    }

    div:first-of-type {
      background: red;
    }

    span:first-of-type {
      background: yellow;
    }
  </style>
</head>

<body>

  <h1>This is a heading</h1>
  <p>父元素body里面第一个出现的p元素，变蓝色</p>
  <p>The second paragraph.</p>
  <p>The fourth paragraph.</p>
  <p>
    <p>父级p里面第一个出现的p元素,但是与父元素同名，没有被获取到，没有变蓝色，什么原因？？</p>
    <p>The fourth paragraph.</p>
  </p>
  <div>父元素body里面第一个出现的div元素，变红色</div>
  <div>
    <div>父级div里面第一个出现的div元素,但是与父元素同名，可以被选择到，变红色，什么原因？？</div>
    <div>The fourth paragraph.</div>
  </div>
  <div>
    <span>父元素div里面第一个出现的span元素，变黄色</span>
    <span>
      <span>父级span里面第一个出现的span元素,但是与父元素同名，可以被选择到，变黄色，什么原因？？</span>
      <span>不是第一个，我不变</span>
    </span>
    <span>不是不是</span>
  </div>
</body>

结果展示：

2.3 p:ony-of-type

代码：

    stylediv {
      border: 1px solid black;
    }

    p:only-of-type {
      background: #ff0000;
    }
  </style>
</head>

<body>
  <div>
    <span>sapaspan</span>
    <p>pppppp1,这个父元素中只有一个p元素，这个p元素被选择到，变红色</p>
  </div>
  <div>
    <span>sapaspan</span>
    <p>pppppppp1，这个div父元素中有2个p元素，这个p元素不会被选择到，不变</p>
    <p>pppppppp2，这个div父元素中有2个p元素，这个p元素不会被选择到，不变</p>
  </div>
  <div>
    <p>pppppppppppppp1，这个父元素中只有一个p元素，这个p元素被选择到，变红色</p>
  </div>

</body>

结果展示：

①

②

2.8 p:last-child

代码：

  <style>
    p:last-child {
      background: blue;
    }

    div:last-child {
      background: red;
    }

    span:last-child {
      background: yellow;
    }
  </style>
</head>

<body>
  <p>你是谁</p>
  <p>我是body的最后一个p元素，但是不是body的最后一个元素，不会变蓝色</p>
  <div>
    <p>who are you</p>
    <p>who are you</p>
    <p>我是div中最后一个元素，是p元素，变蓝色</p>
  </div>
  <span>
    <span>3333</span>
    <span>我是span中最后一个元素，是span元素，变黄色</span>
  </span>
  <div>我是body中最后一个元素，是div元素，变红色</div>
</body>

注意的问题：

① 选择父元素中的最后一个元素，其他的不会去选择

② 最后一个如果是 last-child 前面的元素类型，会被选择到，否则不会被选择到的。

2.9 p:only-child

说明：选择所有仅有一个子元素的p元素，适用p元素，也适用其他元素。
通俗说：就是父元素中只有一个子元素，如果是p元素（如果换成其他元素就是其他元素）就会被选择到。

代码：

  <style>
    div {
      border: 1px solid black;
    }

    p:only-child {
      background: red;
    }

    div:only-child {
      background: yellow;
    }
  </style>
</head>

<body>
  <div>
    <p>pppppp1,这个父元素中只有一个元素，且是p元素这个p元素被选择到，，变红色</p>
  </div>
  <div>
    <span>sapaspan</span>
    <p>pppppppp1，这个div父元素中有2个子元素，这个p元素不会被选择到，不变色</p>
  </div>
  <div>
    <div>
      这个父元素div中只有一个子元素div，变黄色
    </div>
  </div>

结果展示：

①

②

3、input表单元素：的伪类、结合class类的伪类

input元素来做伪类选择

序号	示例	说明
①	input:checked	选择所有选中的表单元素，仅适用于单选按钮或复选框
②	input:disabled	选择所有被禁用的表单元素，用于表单元素 , 通常用来改变背景为灰色，代表不可填写
③	input:enabled	选择所有启用的表单元素，用于表单元素 , 通常用来改变背景为白色，代表可填写
④	input:in-range	选择元素指定范围内的值
⑤	input:invalid	选择所有无效的元素
⑥	input:optional	选择没有"required"的元素属性
⑦	input:out-of-range	选择指定范围以外的值的元素属性
⑧	input:read-only	选择只读属性的元素属性
⑨	input:read-write	选择没有只读属性的元素属性
⑩	input:required	选择有"required"属性指定的元素属性
⑪	input:focus	选择元素输入后具有焦点
⑫

4、：root

:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素。

代码：

:root
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

</body>

结果展示：

liuxmoo

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
伪类/伪元素选择符/选择器深入了解

伪类/伪元素选择符/选择器深入了解：一、伪类选择符/选择器 CSS伪类是用来添加一些选择器的特殊效果。就是给某个元素后面加上冒号然后加上需要的特殊修饰词选择到所需要的效果，或者是元素。 ①元素使用伪类例如：a：link ②元素的类使用伪类例如：a.red:visited...
复制链接

扫一扫