CSS选择器

关系选择器

关系选择器分类

1. 后代选择器
2. 子代选择器
3. 相邻兄弟选择器
4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素，中间用空格隔开

语法

登录后复制

E F{}

• 1.

登录后复制

<ul>
   <li>宝马</li>
   <li>奔驰</li>
</ul>
 <ol>
   <li>奥迪</li>
</ol>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

登录后复制

ul li{
  color:green;
}

• 1.
• 2.
• 3.

子代选择器

定义

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

登录后复制

E>F{}

• 1.

登录后复制

<div> 
  <a href="#">子元素1</a>
  <p> <a href="#">孙元素</a> </p>
  <a href="#">子元素2</a>
</div>

• 1.
• 2.
• 3.
• 4.
• 5.

登录后复制

div>a{
  color:red
}

• 1.
• 2.
• 3.

相邻兄弟选择器

定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

语法

登录后复制

E+F{}

• 1.

登录后复制

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

• 1.
• 2.
• 3.

登录后复制

h1+p{
  color:red;
}

• 1.
• 2.
• 3.

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

语法

登录后复制

E~F{}

• 1.

登录后复制

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

• 1.
• 2.
• 3.

登录后复制

h1~p{
  color:red;
}

• 1.
• 2.
• 3.

伪类选择器一

同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示

超链接相关

1. :link “链接”：超链接点击之前(只适用于a)
2. :visited “访问过的”：链接被访问过之后(只适用于a)
3. :hover “悬停”：鼠标放到标签上的时候(适用于所有标签)
4. :active “激活”： 鼠标点击标签，但是不松手时。(适用于所有标签)

登录后复制

/*让超链接点击之前是红色*/
a:link{
  color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
  color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
  color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
  color:black;
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.

温馨提示

记住，在css中，这四种状态必须按照固定的顺序写

如果不按照顺序，那么将失效。"爱恨准则"love hate。必须先爱，后恨。

:first-child 选择器

定义

:first-child选择器匹配其父元素中的第一个子元素

实例

列表中的第一个<li>元素选择的样式

登录后复制

li:first-child{
  background:yellow;
}

• 1.
• 2.
• 3.

:last-child选择器

定义

:last-child选择器用来匹配父元素中最后一个子元素

实例

指定最后一个p元素的背景色

登录后复制

p:last-child{
    background:#ff0000;
}

• 1.
• 2.
• 3.

:nth-child()选择器

定义

:nth-child(n)选择器匹配父元素中的第 n 个子元素，元素类型没有限制

n 可以是一个数字，一个关键字

实例

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数(该索引的第一个子节点是1)。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色

登录后复制

p:nth-child(odd){
  background:#ff0000;
}
p:nth-child(even){
  background:#0000ff;
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

伪类选择器二

:only-child 选择器

定义

:only-child 选择器匹配属于父元素中唯一子元素的元素

实例

匹配属于父元素中唯一子元素的 p 元素

登录后复制

p:only-child{
  background:#ff0000;
}

• 1.
• 2.
• 3.

:empty选择器

定义

:empty选择器选择每个没有任何子级的元素(包括文本节点)

实例

指定空的p元素的背景色

登录后复制

p:empty{
    background:#ff0000;
}

• 1.
• 2.
• 3.

:not()选择器

定义

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器

实例

为每个并非<p>元素的元素设置背景颜色

登录后复制

:not(p){
    background:#ff0000;
}

• 1.
• 2.
• 3.

:focus选择器

定义

:focus选择器用于选择具有焦点的元素

实例

一个输入字段获得焦点时选择的样式

登录后复制

input:focus{ 
    background-color:yellow;
}

• 1.
• 2.
• 3.

:checked选择器

定义

:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)

实例

为所有选中的输入元素设置宽高

登录后复制

input:checked {
  height: 50px;
  width: 50px;
}

• 1.
• 2.
• 3.
• 4.

伪对象选择器

伪对象也叫伪元素，在过去，伪元素被书写成前面只加一个冒号，实际上应该是

登录后复制

E::伪元素

• 1.

常用伪元素

登录后复制

E:before / E::before
E:after / E::after

• 1.
• 2.

before，after选择器在被选元素的“内容”前面或后面插入内容，用来和content属性一起使用。 虽然E:before/after可转化为E::before/after，但是你写伪元素是要规范，用两个冒号

登录后复制

<ul>
  <li>刘亦菲</li>
  <li>范冰冰</li>
  <li>杨幂</li>
  <li>袁姗姗</li>
</ul>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

登录后复制

ul::before{
  content:"这是ul的伪元素"; 
  color: blue;
}
ul::after{
  content:"这是之后的伪元素";
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

温馨提示

是显示在被选中标签内容之前和之后

应用场景

登录后复制

<p>标题</p>

• 1.

登录后复制

p::before{
  content:" ";
  background-color: red;
  padding-left: 3px;
}

• 1.
• 2.
• 3.
• 4.
• 5.

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class和 id属性

值	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

[attribute] 选择器

定义

[attribute] 选择器用于选取带有指定属性的元素

实例

为带有 target属性的 <a>元素设置样式

登录后复制

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

• 1.
• 2.
• 3.

[attribute=value] 选择器

定义

[attribute=target] 选择器用于选取带有指定属性和值的元素

实例

为 target=“_blank” 的 <a> 元素设置样式

登录后复制

a[target=_blank]{ 
    background-color:yellow;
}

• 1.
• 2.
• 3.

[attribute~=value] 选择器

定义

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素

实例

选择 titile 属性包含单词 “flower” 的元素，并设置其样式

登录后复制

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

• 1.
• 2.
• 3.

[attribute|=value] 选择器

定义

[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元素

温馨提示

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"

实例

选择 lang 属性值以 “en” 开头的元素，并设置其样式

登录后复制

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

• 1.
• 2.
• 3.

[attribute^=value] 选择器

定义

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素

实例

设置 class 属性值以 “test” 开头的所有 div 元素的背景色

登录后复制

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

• 1.
• 2.
• 3.

[attribute$=value] 选择器

定义

[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素

实例

设置 class 属性值以 “test” 结尾的所有 div 元素的背景色

登录后复制

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

• 1.
• 2.
• 3.

[attribute*=value] 选择器

定义

[attribute*=value] 选择器匹配属性值包含指定值的每个元素

实例

设置 class 属性值包含 “test” 的所有 div 元素的背景色

登录后复制

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

• 1.
• 2.
• 3.

置 class 属性值以 “test” 开头的所有 div 元素的背景色

登录后复制

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

• 1.
• 2.
• 3.