结构伪类选择器、属性选择器、css的作用及字体样式 2022-1-24

一、结构伪类选择器

伪类：id+class结合

练习1.1ul的第一个元素，ul的最后一个元素

总体代码

    
    
    


p0
p1
p2
p3

    
li1
    
li2
    
li3

练习1.2 选中p1：定位到父元素，选择当前的第一个元素，并且是当前元素才能生效

选择当前p元素的父级元素，选中父级元素的第一个

/*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个*/
        p:nth-child(1){
            background: aqua;
        }

总体代码

    
    
    


p0
p1
p2
p3

    
li1
    
li2
    
li3

扩展

同样是选择第一个元素，当加了一个h1标签，就没有变化，因此必须是当前元素才能生效。

 p:nth-child(1){
            background: aqua;
        }

    
    
    


h1
p0
p1
p2
p3

    
li1
    
li2
    
li3

p:nth-child()和p:nth-of-type(）的使用

			p:nth-child(2){
            background: aqua;
        }

因为第二个元素是p标签，所以是有变化的，以下这样就可以

p:nth-of-type这个不受其他标签的影响，括号里是1就是这个标签的第一个元素

/*选中父元素，下的p元素的第一个   类型*/
        p:nth-of-type(1){
            background: yellow;
        }

二、属性选择器（推荐使用）

Id+class结合

总结

= 绝对等于
*= 包含这个元素
^= 以什么什么开头
$= 以什么什么结尾

1、存在Id属性的元素

    
    
    



    
    2
    3
    4
    5
    6
    7
    8
    9
    10

Id等于first的元素

        a[id=first]{
            background: antiquewhite;
        }

3、class中有link的元素

        a[class*="link"]{
            background: chartreuse;
        }

4、选中href中以http开头的元素

        a[href^=http]{
            background: cornflowerblue;
        }

5、选中href中以doc开头的元素

    
    
    



    
    2
    3
    4
    5
    6
    7
    8
    9
    10

三、CSS的作用及字体样式

3.1美化网页元素

为什么要美化网页？

1. 有效的传递页面信息
2. 美化网页，页面漂亮才能吸引用户
3. 凸显页面的主题
4. 提高用户的体验

3.2 span标签：重点要突出的字，使用span 套起来

    
    
    


欢迎学习 Java

3.3字体样式

font-family字体样式,可以同时存在两种以上字体
font-size字体大小
font-weight字体粗细，bold为粗体，lighter为细体
color 字体颜色

    
    
    
    


故事介绍

    熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
    “熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。


    找不回全部的水果不能回家哦！太可怜了。快来帮帮他们吧！熊大喜欢苹果，熊二喜欢鸭梨，
    收集全部的水果回家，即可成功过关。吃了神奇药水，熊变大后可以踩死野猪，普通状态碰到野猪会死哦，小心!


    If you were a teardrop;In my eye,
    For fear of losing you,I would never cry.
    And if the golden sun,Should cease to shine its light,
    Just one smile from you,Would make my whole world bright.

斜体的使用

    
    
    



    熊大和熊二到森林中采摘水果，可到家才发现，辛辛苦苦摘到的水果都不见了。
    “熊二不是让你拿好吗！？”熊大愤怒的说。“为什么所有的错都怪我...” 熊二很委屈。