CSS伪类是啥？CSS伪类的详细介绍

<div class="thumbnail">[...]</div>

然而，HTML元素具有基于其状态，位置，性质以及与页面和用户的交互的共同特征。这些是HTML代码中通常不标记的特征，但我们可以使用 CSS中的伪类来定位它们，例如：

1、一个元素，它是其父元素中的最后一个子元素

2、访问的链接

3、一个全屏的元素。

这些是伪类通常所针对的特征。为了更好地理解类和伪类之间的区别，我们假设我们使用该类.last来标识不同父容器中的最后一个元素。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>
我们可以使用以下CSS设置这些最后一个子元素的样式：
li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}
   但是当最后一个元素改变时会发生什么？好吧，我们必须将.last类从前一个元素移动到当前元素。
更新类的麻烦可以留给用户代理，至少对于元素中常见的那些特征（并且最后一个元素是它可以获得的常见元素）。拥有预定义的:last-child伪类确实非常有用。这样，我们不必指示 HTML代码中的最后一个元素，但我们仍然可以使用以下CSS来设置它们的样式：
li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}
伪类的主要类型
伪类有很多种，它们都为我们提供了基于其特征无法访问或难以访问的特征来定位元素的方法。这是MDN 中标准伪类的列表。
1.动态伪类
动态伪类根据它们为响应用户的交互而转换的状态动态地添加到HTML元素和从HTML元素中删除。一些的动态伪类的例子是，，，和，所有这些都可以被添加到锚定标记。:hover:focus:link:visited<a>
a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}
2.基于状态的伪类
基于状态的伪类在处于特定静态时添加到元素中。其中一些最着名的例子是：
:checked可以应用于复选框（<input type="checkbox">）
:fullscreen 定位当前以全屏模式显示的任何元素
:disabledHTML元素，可以是在已禁用模式，例如<input>，<select>，和<button>。
最流行的基于状态的伪类必须是:checked，它标记是否选中了复选框。
.checkbox:checked + label{
  font-style:italic;
}
input:disabled{
  background-color: #EEEEEE;
}
3.结构伪类
结构伪类根据它们在文档结构中的位置对元素进行分类。它最常见的例子是:first-child，:last-child和:nth-child(n)- 都可以用来根据容器的位置来定位容器内的特定子元素 - 并且:root它以DOM中最高级别的父元素为目标。
4.杂项伪类
还有一些难以分类的杂项伪类，例如：
:not(x)选择与选择器x不匹配的元素
:lang(language-code) 选择哪些内容采用特定语言的元素
:dir(directionality)选择具有给定方向性内容的元素（从左到右或从右到左）。
p:lang(ko){
  background-color: #FFFF00;
}
:root{
  background-color: #FAEBD7;
}
nth-child与类型 Pseudo-Classes的第n个
其中一件关于伪类最难的事情是可能理解的差别:nth-child和:nth-of-type伪类。
两者都是结构伪类，并在父元素（容器）内标记特定元素，但方式不同。
假设?为2，然后:nth-of-child(n)靶向是一个元素它的父元素的第二个孩子，以及:nth-of-type(n)目标第二的中相同类型的元件的（例如段落）父元素内。
我们来看一个例子吧。
/* a paragraph that's also the second child inside its parent element */
  p:nth-child(2) {
  color: #1E90FF;    // lightblue
}
/* the second paragraph inside a parent element */
p:nth-of-type(2) {
  font-weight:bold;
}
 让我们看看这个简短的CSS样式如何在两种不同的情况下使用HTML。
案例1
在案例1中，a中的第二个元素<div>是无序列表，因此nth-child(2)规则不适用于它。虽然它是第二个子元素，但它不是一个段落。
但是，如果父元素确实具有第二个段落，则该nth-of-type(2)规则将适用，因为此规则仅查找<p>元素，而不关心父元素内的其他类型的元素（例如无序列表）。
在我们的示例中，nth-of-type(2)规则将设置第二个段落，即子3。
<!-- Case 1 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <ul>Unordered List 1, Child 2</ul>
  <p>Paragraph 2, Child 3</p>
</div>
   
案例2
在第二种情况下，我们将无序列表移到第三位，第二段将在它之前。这意味着将应用规则:nth-child(2)和:nth-of-type(2)规则，因为第二个段落也是其父<div>元素的第二个子句。
<!-- Case 2 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <p>Paragraph 2, Child 2</p>
  <ul>Unordered List 1, Child 3</ul>
</div>
如果你想更多地了解:nth-of-child和:nth-of-type伪类之间的差异，CSS Tricks上有一个很棒的帖子。如果您使用SASS，Family.scss可以帮助您创建复杂的nth- child'ified元素。
伪类与伪元素
当我们谈论伪类时，理解它们与伪元素的区别也很重要，以免混淆它们。
Pseudo-elements用户代理也添加了诸如::before和::after（参见本教程如何使用它们），并且可以使用CSS对它们进行定位和设置样式，就像伪类一样。
但是，虽然我们使用伪类来选择文档树中仅存在未单独标记的HTML元素，但伪元素允许我们根据DOM（例如和）或仅作为目标通常不存在于DOM中的元素。现有元素的某些部分（例如或）。::before::after::first-letter::placeholder
语法也有区别。伪元素通常用双冒号识别::，而伪类用单冒号识别:。
这可能导致混乱，如CSS2中，伪元素也标记为单个冒号 - 浏览器仍接受伪元素的单冒号语法。
我们用CSS来定位伪类和伪元素之间也存在差异。
1.它们在CSS选择器序列中的位置
伪元素只能出现在选择器序列之后，而伪类可以放在CSS选择器序列中的任何位置。
例如，您可以<ul>以两种方式定位列表元素的最后一个列表项。
<ul>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
</ul>
ul > :last-child.red {
  color: #B0171F;
}
要么
ul > .red:last-child {
  color: #B0171F;
}
选择器的第一个序列选择<ul>元素中的最后一个子元素（具有类.red），第二个元素选择.red内部具有类的元素中的最后一个子元素<ul>。如您所见，伪类的位置是可变的。
让我们尝试用伪元素做类似的事情。
ul > .red::after {
  display: block;
  content: 'red';
  color: #B0171F;
}
上面的CSS代码是有效的，文本“red”将出现在<li>带有类的项目之后.red。
另一方面，这段代码不起作用，因为我们无法改变选择器序列中伪元素的位置。
ul > ::after.red {
  display: block;
  content: 'red';
  color: #B0171F;
}
2.选择器序列中的出现次数
此外，只有一个伪元素可以出现在选择器旁边，而伪类可以在组合有意义的情况下相互组合。例如，为了目标，同时也是只读的，我们可以创建伪类组合的第一个孩子元素:first-child，并:read-only以下列方式：
:first-child:read-only {
  color:#EEEEEE;
}
jQuery选择器扩展
具有:语法的选择器代码并不总是构成适当的CSS伪类。如果您曾经使用过jQuery，那么您可能已经使用了许多具有:语法的选择器，例如$(':checkbox')，$(':input')和$(':selected')。
重要的是要知道这些不是 jQuery所针对的CSS伪类。它们被称为jQuery选择器扩展。
jQuery选择器扩展允许您使用更简单的关键字来定位HTML元素。它们中的大多数是多个普通CSS选择器的组合，它们用单个关键字表示。
/* Change the font of all input-related HTML elements,
like button, select, and input */
$( ":input" ).css("font-family","courier new")
以上就是CSS伪类是什么？CSS伪类的详细介绍的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：CSS伪类是啥？CSS伪类的详细介绍