属性选择器和子元素的伪类

一、属性选择器

前端学习Day11

1.万能属性title
title属性同id一样可以使用在任何元素上，当鼠标移动到元素上时，起提示作用
title属性示例：

<p title="爱在西元前">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="你我的爱">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="你爱我吗">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="良辰美景">早安，
清晨的雨露，愿好运相伴一生</p>

要求：

• 将所有含有title标签的元素背景颜色设置为棕色

[title]{
background-color :brown;
}

效果如下：

前端学习Day11

• 将title属性值为"爱在西元前"的元素字体颜色设置为棕色

[title="爱在西元前"]{

color :brown;
}

效果如下：

前端学习Day11

• 将title属性值中以"你"开头的元素字体颜色设置为棕色

[title^="你"]{
color :brown;
}

效果如下：

前端学习Day11

• title属性值中以"景"结尾的元素字体颜色设置为棕色

[title$="景"]{

color :brown;
}

效果如下：

前端学习Day11

• 将title属性值里面包含"爱"的元素字体颜色设置为棕色

[title*="爱"]{
color :brown;

}

效果如下：

前端学习Day11

二、子元素的伪类

前端学习Day11

1.body处代码

<h1>相思</h1>
<p>红豆生南国，</p>
<p>春来发几支。</p>
<div>
<p>愿君多采撷，</p>
<p>此物最相思。</p>
</div>

2.要求：

• 将第一个元素设置字体颜色设置为棕色，第一个元素为h1因此将h1放在:前

h1:first-child{
color:brown;
}

效果如下：

前端学习Day11

• 将第三个p元素设置字体颜色为棕色，此时目标元素为p元素，同时第三个p 为div的第一个子元素因此将p放在:前

p:frist-child{
color:brown;
}

效果如下：

前端学习Day11
2.将第四个p设置字体颜色为棕色，从body元素看，最后一个子元素是div，因此无法设置样式，从div元素看最后一个元素是p，确定能够设置样式

p:last-child{
color:brown;
}

效果如下：

前端学习Day11

• 设置第一个p字体颜色为棕色，此时第一个p 为body元素的2个子元素，因此应当使用nth-child(2){}

p:nth-child(2){
color:brown;
}

效果如下：

前端学习Day11

注意：
第四句字体颜色变成棕色是因为第四句是p元素，且这个p为div的第二个元素

• 设置第二个p字体颜色为棕色，因为第二个p为body的第三个子元素，因此使用p:nth-child(3){}

p:nth-child(3){
color:brown;
}

效果如下：

前端学习Day11

• 将第一个p设置字体颜色为棕色，此时使用:first-of-type需要指定元素p即第一个p的子元素

p:first-of-type{
color:brown;
}

效果如下：

前端学习Day11

注意：
此处愿君多采撷变为棕色，因为这个p是div的第一个p

• 将二，四两句变为棕色，此时二是两句分别是body元素的第二个子元素，div元素的第二个

p:nth-of-type(2){
color:brown;
}

效果如下：

前端学习Day11

• 其他的同理