关闭

CSS选择器

288人阅读 评论(0) 收藏 举报
分类:
什么是选择器?
    每个CSS样式声明由两部分组成 放在<style>...</style>中
    选择器{
       样式;
    }
    选择器指明了{}中样式的作用对象,也就是样式作用于网页中的哪些元素

    注:例子都用 span
CSS样式{
    1.内联式;
    2.嵌入式;
    3.外部式;   优先级:内联式>嵌入式>外部式 --就近原则
}

CSS选择器

1.标签选择器 : 如 p{font-size:20px;}

2.类选择器:.类选择器名称{CSS样式代码;}
        调用:<span class="类选择器名称">
    
3.ID选择器:#ID名称{CSS样式代码;}
        调用:<span id="ID名称">

    类选择器和ID选择器的区别:
         ID选择器只能使用一次,而类选择器可使用多次
         可以使用类选择器为一个元素同时设置多个样式,不能用ID

4.子选择器:> 用于选择指定标签元素的第一代元素

        .food>li{border:1px solid red;}

       这行代码会为  class  名为 food 下的子元素  li 加入红色实线边框


5.包含(后代)选择器:用  空格 用于选择指定标签元素下的后辈元素
        .first span{color:red;
           }
    区别:
        > 作用于元素的第一代后代,空格作用于元素的所有后代
    共同         都 是属于 类选择器

6.通用选择器:是功能最强大选择器
        它使用一个 * 指定,它匹配html 中的所有标签

7.伪类选择符:它允许给html不存在的标签设置样式
            a:hover{color:red;font-size:20px;}
               为a标签鼠标滑过的状态设置字体颜色变红,字体字号设置为20px
            a:link{color:blue;}    //未访问
            a:visited{color:blue;}  //已访问
            a:active{color:yellow;} //活动链接  etc.

8.分组选择符:为多个标签元素设置同一个样式时,使用分组选择符
        eg:
            h1,span{color:red;}

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:65751次
    • 积分:2061
    • 等级:
    • 排名:千里之外
    • 原创:96篇
    • 转载:9篇
    • 译文:0篇
    • 评论:63条
    最新评论