什么是CSS选择器？

CSS是一种用于在屏幕上呈现html，xml等的语言. CSS主要将样式应用于相应的元素，以渲染相对应用的元素. 那么对我们来说选择对应的元素非常重要. 如何选择相应的元素需要我们调用选择器.

在CSS中，选择器是用于选择需要设置样式的元素的模式. 选择器主要用于确定HTML树结构中的DOM元素节点.

什么是CSS选择器？

一个: 类选择器

Class元素可以具有多个值，以空格分隔. 一个文件中可以有多个相同的类值.

<p class="first done"></p>

样式:

.first{
  background-color: red;
}

第二: ID选择器

#（哈希）符号加ID名称. 但是单个文件中的id值应保持唯一. 元素中仅设置了一个ID.

<p id="polite"></p>

样式:

#polite{
  text-transform: uppercase;
}

三: 通用选择器

*允许选择页面的所有元素.

<p></p>

样式:

* {
  text-decoration: line-through;
}

四: 属性选择器

1: 状态和值属性选择器（状态和值）

有三种情况: 属性名称存在；属性名称存在并具有对应的值；属性名称存在并包含相应的值.

<p data-fruit></p>

样式:

[data-fruit]{
  color: green;
}

<p data-fruit="apple"></p>

样式:

[data-fruit="apple"]{
  color: red;
}

<p data-fruit="apple banana"></p>
<p data-fruit="apple"></p>

样式:

[data-fruit~="apple"]{
  color: blue;
}

以上两个标签将匹配.

2: 子字符串值属性选择器（子字符串值也称为伪常规值）

五: 伪类（pseudo-class）

添加到选择器末尾的关键字以: 作为前缀. 当您希望样式以特定状态呈现给指定元素时，可以在元素的选择器后面添加一个伪类.

例如，让超链接在访问之前和之后具有相同的样式，并且在鼠标悬停时不一致.

a:visited{
  color: blue;
}
/** 选择器上的逗号不能省略*/
a:hover,
a:active,
a:focus{
  color: red;
  text-decoration: none;
}

例如，当列表的偶数行和奇数行的背景不同时

<ul>
  <li><p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>  
  <li>p>这是第一行</p></li>
</ul>
li:nth-of-type(2n){
  background-color: red;
}
li:nth-of-type(2n+1){
  background-color:blue;
}

此处的nth-of-type（）与兄弟节点匹配. 因此，不能将其写为p: nth-​​of-type. 另外，如果使用nth-child（），它也匹配同级节点. 尽管看名字就像一个子节点.

六: 伪元素

通过: : 在元素后添加两个冒号前缀css 中的选择器包括，即组合关键字，以选择元素的一部分.

<a href="http://www.moremom.com">moremom</a>
a::after{
  content:"后面追加内容";
}
或者
[href^="http"]::after{
  content:"后面追加的内容";
}

七: 组合器

名称组合器选择

选择器组

A，B

匹配A或B的任何元素，或匹配A和B

后代选择器

A B

B是A的后代节点，与B匹配

子选择器

A> B

B是A的直接子，匹配B

相邻的兄弟选择器

A + B

B是A的下一个同级节点，B紧随Acss 中的选择器包括，匹配B

通用兄弟选择器

A〜B

B是A之后的任何同级节点，匹配B

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-256095-1.html