属性选择器和子元素的伪类
一、属性选择器
图片发自简书App
1.万能属性title
title属性同id一样可以使用在任何元素上，当鼠标移动到元素上时，起提示作用
title属性示例：
<p title="爱在西元前">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="你我的爱">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="你爱我吗">早安，
清晨的雨露，愿好运相伴一生</p>
<p title="良辰美景">早安，
清晨的雨露，愿好运相伴一生</p>
要求：
- 将所有含有title标签的元素背景颜色设置为棕色
[title]{
background-color :brown;
}
效果如下：
图片发自简书App
- 将title属性值为"爱在西元前"的元素字体颜色设置为棕色
[title="爱在西元前"]{
color :brown;
}
效果如下：
图片发自简书App
- 将title属性值中以"你"开头的元素字体颜色设置为棕色
[title^="你"]{
color :brown;
}
效果如下：
图片发自简书App
- title属性值中以"景"结尾的元素字体颜色设置为棕色
[title$="景"]{
color :brown;
}
效果如下：
图片发自简书App
- 将title属性值里面包含"爱"的元素字体颜色设置为棕色
[title*="爱"]{
color :brown;
}
效果如下：
图片发自简书App
二、子元素的伪类
图片发自简书App
1.body处代码
<h1>相思</h1>
<p>红豆生南国，</p>
<p>春来发几支。</p>
<div>
<p>愿君多采撷，</p>
<p>此物最相思。</p>
</div>
2.要求：
- 将第一个元素设置字体颜色设置为棕色，第一个元素为h1因此将h1放在:前
h1:first-child{
color:brown;
}
效果如下：
图片发自简书App
- 将第三个p元素设置字体颜色为棕色，此时目标元素为p元素，同时第三个p 为div的第一个子元素因此将p放在:前
p:frist-child{
color:brown;
}
效果如下：
图片发自简书App
2.将第四个p设置字体颜色为棕色，从body元素看，最后一个子元素是div，因此无法设置样式，从div元素看最后一个元素是p，确定能够设置样式
p:last-child{
color:brown;
}
效果如下：
图片发自简书App
- 设置第一个p字体颜色为棕色，此时第一个p 为body元素的2个子元素，因此应当使用nth-child(2){}
p:nth-child(2){
color:brown;
}
效果如下：
图片发自简书App
注意：
第四句字体颜色变成棕色是因为第四句是p元素，且这个p为div的第二个元素
- 设置第二个p字体颜色为棕色，因为第二个p为body的第三个子元素，因此使用p:nth-child(3){}
p:nth-child(3){
color:brown;
}
效果如下：
图片发自简书App
- 将第一个p设置字体颜色为棕色，此时使用:first-of-type需要指定元素p即第一个p的子元素
p:first-of-type{
color:brown;
}
效果如下：
图片发自简书App
注意：
此处愿君多采撷变为棕色，因为这个p是div的第一个p
- 将二，四两句变为棕色，此时二是两句分别是body元素的第二个子元素，div元素的第二个
p:nth-of-type(2){
color:brown;
}
效果如下：
图片发自简书App
- 其他的同理
