
<style>
    ul li {
        color: aqua;
        }
</style>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <form>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </form>
    </ul>
</body>


<style>
.liebiao li{
    color:red
}
</style>
body>
<ul class="liebiao">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>
</body>

2，子代选择器

类似于后代选择器，不过子代选择器只能有一个后代，即和他关系挨得最近的下一级元素。语法为：E>F{}，>表示儿子。比如一个父亲有三个儿子，那么三个儿子都会被选择。

3，相邻兄弟选择器

同级关系中，指定元素的下一个元素。语法：E+F{}。


<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<style>
h1+p{
color : red;
}
 
</style>

4，相邻通用兄弟选择器

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开。语法E~F{}，E表示Element，F表示Follow。~为键盘左上角Esc键下面的那个。


<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
<style>
h1~p{
color : red;
}
</style>

二，伪类选择器

伪类，也就是假的类选择器。某些元素标签会具有不同的状态，伪类选择器作用之一就是：智能地识别某个标签的状态，假如状态发生变化则应用不同的style样式。作用之二就是：用于辅助说明。

常见的就是超链接文本，他有没有被点击时的状态，正在被点击时的状态，已经点击后的状态。伪类选择器最显眼的地方就是：他是用英文冒号：。一般状态的改变都是被事件改变的。

1，与超链接相关

超链接相关：语法格式：标签|其他选择器:状态{}。而且，必须按照1-4的顺序进行写css代码，否则无效，即lvha，爱恨准则，love and hate。

1，:link"链接":超链接点击之前（只适用于a)。

2，:visited"访问过的":链接被访问过之后(只适用于a)。

3，:hover"悬停":鼠标放到标签上的时候(适用于所有标签)。

4，:active"激活":鼠标点击标签，但是不松手时。(适用于所有标签)。


a:link{
color:red;
}

2，:first-child伪类选择器

语法：定位:first-child{}。用于匹配父元素的第一个子元素。例如，列表中的第一个<li>元素选择的样式。


//后代选择器+伪类选择器
ul li:first-child{
background:yellow;
}
<ul>
    <li>列表1</li>//他生效
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

3，:last-child伪类选择器

嵌套关系中，用于匹配父元素的最后一个子元素。例如，列表中的最后一个<li>元素选择的样式。


ul li:last-child{
background:yellow;
}
<ul>
    <li>列表1</li>//他生效
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

4，:nth-child伪类选择器

定义:嵌套关系中，nth-child(n)选择器匹配父元素中的第n个子元素，元素类型没有限制。n可以是一个数字，或一个关键字。更多是使用关键字：odd和even，表示奇数和偶数。


 
ul li:nth-child(数字|odd|even){
background:yellow;
}
<ul>
    <li>列表1</li>//他生效
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

5，:only-child选择器

定义：:only-child选择器匹配属于父元素中唯一子元素的元素。即：一个标签之下只嵌套了一个标签时才会生效。下面代码中，只有第一个<p>会生效。


<div>
<p>我是唯一的p标签</p></ div>
<div>
<p>我是第一个p</p>
<p>我是第二个p</p>
</div>

6，:empty选择器

定义:empty选择器选择每个没有任何子级的元素（包括文本节点)，也就是不存在嵌套关系的标签或没有元素内容。元素内容是指：<p>这就是元素内容</p>。文本内容的空指的是：不存在任何字符，空格也不行。语法：标签：empty{}。

7，:not()选择器

定义：:not(selector)选择器匹配每个元素是不是指定的元素/选择器。：not(p)指的是所有非p标签。

8，:focus选择器

定义:focus选择器用于选择具有焦点的元素。例子：一个输入字段获得焦点时选择的样式。


//input控件+：focus伪类选择器
input:focus{
background-color: yellow;
}

9，:checked选择器

定义:checked选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框)。就是：单选框和复选框，你选择之后他的状态就发了改变，然后为状态发生改变的框框改变样式。

三，伪对象选择器

伪对象选择器也叫做伪元素选择器，他是用双冒号::，看到双冒号::就知道他是伪对象选择器。语法：E::伪元素。E指的是Element。伪元素常见的取值就两个：before|after。

before，after选择器在被选元素的"内容"前面或后面插入内容，用来和content属性一起使用。一定要写成E::before/after的形式。插入的伪元素的类型是行内元素，需要使用内容或者height撑开高度。

之所以叫做伪元素：因为元素是html里面的概念，现在用css的属性来实现html元素的功能(这个功能是指：在网页上显示各种元素)，所以叫伪元素。例子如下：

网页显示效果如下：在无序列表前后加上文字，文字效果类似于<p>，但又不是p。

四，属性选择器(了解即可，不常用)

这里的属性是指：html元素的属性，而不是css的属性。属性包括：属性名称+属性的值。属性选择器的最显眼的就是：[]，即把属性放在方括号里面[]，语法格式：标签[属性=值]{}。

1，[attrbute]选择器

定义：[attribute]选择器用于选取带有指定属性的元素实例。举例：为带有target属性的<a>元素设置样式。


a[target]{
    background-color: ye71ow;
}

2，[attrbute=value]选择器

选择具有确切属性与值的元素。这里的属性可以自定义。

3，[attribute~=value]选择器

定义：[attribute~=value]选择器用于选取属性值中包含指定词汇的元素实例。举例：选择titile 属性包含单词"flower"的元素，并设置其样式。也就是属性字符串中只有包含value即可选中。


p[title~=flower]{
background-color:yellow;
}

4，[attribute|=value]选择器

定义：[attribute |=value]选择器用于选取带有以指定值开头的属性值的元素。温馨提示：该值必须是整个单词，比如lang="en"，或者后面跟着连字符，比如lang="en-us'。举例：选择lang属性值以"en"开头的元素，并设置其样式。可以的：'en'，'en-666'，'en-abc'，这些不行：'en666'。


p[lang|=en]{
background-color: ye1low;
}

5，[attributeh=value]选择器

定义：[attribute^tvalue]选择器匹配属性值以指定值开头的每个元素。举例：设置class属性值以"test"开头的所有div元素的背景色。'test66'是可以的。'test-66'也可以。


div[class="test"]{
background :#ffff00;
}

6，[attribute$=value]选择器

定义：[attribute$=value]选择器匹配属性值以指定值结尾的每个元素，属性值字符串含有value即可。举例：设置class属性值以"test"结尾的所有div元素的背景色。


div[class$="test"]{
    background:#ffff00;
}

7，[attribute*=value]选择器

定义[attribute*=value]选择器匹配属性值包含指定值的每个元素。举例：设置class属性值包含"test"的所有div元素的背景色。


div[class*="test"]{
    background:#ffff00;
}

8，总结

这些选择器不常用，不必过度关注，他们的符号在键盘的第二行。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/796175