CSS菜鸟学习笔记1-选择器的简单介绍

CSS是用来设置网页中元素的样式。

1、设置元素样式的方式

（1）内联样式。在标签内部通过设置style属性来设置元素样式。（不推荐使用。）

前端css演示

（2）内部样式表。将样式编写到head下的style标签中。可以在当前网页对编写的样式复用。

    


    
前端css演示

（3）外部样式表。将css样式编写到一个外部的css文件中，通过link标签将外部css文件引入当前页面。将样式编写到外部css文件，可以使用浏览器的缓存机制。（开发中推荐使用）

style.css文件
h2{
    color: chartreuse;
    font-size: small;
}

html文件

    


    
前端css演示

2、CSS语法规范

选择器+声明块（多个声明组成，每个声明是样式名与样式值成对的结构）

选择器介绍：

常用选择器：

        （1）元素选择器，根据标签名来选中指定的元素。标签名{}

        （2）id选择器（id的值必须唯一，不能重复），根据元素的id属性值选中一个元素。#id属性值{}

        （3）类选择器（class的值可以相同），根据元素的class属性选中一组元素，可以给同一个元素设置多个class属性。 .class属性值{}

        （4）通配选择器，选中页面中的所有元素。 *{}

复合选择器：

        （1）交集选择器，选中同时复合多个条件的元素。选择器1选择器2....选择器n{}

        （2）并集选择器，同时选择多个选择器对应的元素。选择器1，选择器2，....选择器n{}

关系选择器：

        （1）子元素选择器，选中指定父元素的指定子元素。父元素>子元素

        （2）后代元素选择器，选中指定元素内的指定后代元素。祖先 后代

        （3）选择下一个兄弟（紧挨着的）。前一个+下一个

        （4）选择下边所有的兄弟。兄~（波浪线）弟

属性选择器：

        （1）[属性名] 选择含有指定属性的元素

        （2）[属性名=属性值]选择含有指定属性和属性值的元素

        （3）[属性名^=属性值]选择属性值以指定值开头的元素

        （4）[属性名$=属性值]选择属性值以指定值结尾的元素

        （5）[属性名*=属性值]选择属性值中含有某值的元素

伪选择器：以：开头

        根据所有的子元素排序

        （1）:first-child 第一个子元素

        （2）:last-child最后一个子元素

        （3）:nth-child()选中第n个子元素。n:0-正无穷；2n或even:偶数；2n+1或odd：奇数

        在同类型元素中排序

        （1）:first-of-type

        （2）:last-of-type

        （3）:nth-of-type()

        （4）:not()否定伪类，将符合条件的元素从选择器中去除。

超链接a标签的伪类：

                a:link 表示没有访问过的链接

                a:visited 表示访问过的链接

                下面两个可以应用于其他标签

                a:hover 表示鼠标移入的状态

                a:active 表示鼠标点击

    


    超链接1
    超链接2

伪元素：

        页面中的一些特殊位置。以::开头

        ::first-letter 表示第一个字母

        ::first-line 表示第一行

        ::selection 表示选中的内容

        ::before 元素的开始，结合content属性使用

        ::after 元素的最后，结合content属性使用

    


    
前端css演示
    
前端css演示

上述代码运行结果：