CSS3和选择器

一、CSS

1、CSS全称层叠样式表，通常有称为风格样式表。Cascading Style Sheet  也叫级联样式表。

2.CSS第一版发布时间1996年12月，2010发布CSS3.0版本，也就是现在用的CSS3.。

3.CSS使用的优势（作用）：

• 内容与表现分离
• 表现统一，容易修改
• 有很多丰富的样式，使页面布局更加灵活。
• 减少网页的代码，提高浏览网速，节省网络宽带，提高代码的重用。
• 运用独立的css,有利于网页被搜索引擎收录。

4.CSS3的基本语法：

h1{
    font-size:15px;
    color:red;
}

注释：color,font-size是属性，red是值，合起来就是样式的声明。h1是选择器。

5.样式标签： 注释：内部样式写在head标签中，只能适用于原网页。

外部样式：

注释：外部样式，首先要创建文件件CSS，再去创建文件.css文件。最后在head标签里面导入上面的代码即可！
其他写法一样。
rel是在本页面使用外部样式表，type这文件样式文本，href是写的css文件的路径。

p{
    color:blue;
}

这里写的是链接式外部样式，一般常用！

样式优先级：

行内样式 > 内部样式 > 外部样式

还有这个优先级遵守 就近原则, 也就是李标签越近的样式优先级别越高。

二、CSS3的选择器（常用的选择器）

1.基本选择器:标签选择器，类选择器，ID选择器

标签选择器：如h1~h6,写在标签里面。

标签选择器

类选择器:

.class{

    font-size:15px;
    color:red;

}
//注释：其中.class是类名称。font-size是属性，后面的是值。

id选择器：

#id{
    
    font-size:20px;
}
//注释:id选择器的声明,以#号键开头，在同一个页面里面，ID属性只能设置一次。

注意:基本选择器有分优先级，ID选择器 > class类选择器  > 标签选择器 ，它们是不遵循就近原则的！

2.CSS3高级选择器：层次选择器

《1》后代选择器：
body p{

    background-color:yellow;
}
//注释：后代选择器，选择的是所有的P标签，在body和p之间要用空格隔开！

《2》子代选择器：

body>p{
    color:red;

}
//注释：body为父元素，p为子元素。选择的是body下面的子元素P.

《3》相邻兄弟选择器：
.active+p{
    
    color:yellow;
}

//注释：.active和p是同辈元素，选择的是紧邻p下面的一个元素，而且只能是往后面找！

《4》通用兄弟选择器：
.active~p{
    
      color:blue;

}
//注释：这两个都是同辈元素，选择的是所有的p元素，也即是和p同级，可以是一个，也可以是多个

3.结构伪类选择器：

body p:first-child{


}
//注释：这是指父元素下面的第一个子元素p

body p:last-child{


}
//父元素下面的最后一个子元素

body p:nth-child(n){


}
//选择父元素下面的第n个子元素p

body p:last-of-type{

}
//父元素下面的指定类型的最后一个元素

body p:first-of-type{

}
//父元素下面的指定类型的第一个元素

body p:nth-of-type(n){


}
//父元素下面的指定类型的第n个元素

注意：body p:nth-child(n)在父级元素里面从第一个元素找，部分类型，也就是只有是p元素都会找到！

           body p:nth-of-type(n)在父级元素里面先看类型，在看位置，不符合类型的元素直接排除！

4.属性选择器：

p[id]{

}
//匹配属性id的p元素

p[id=val]{

}
//匹配属性id=val的p元素

p[id*=val]{

}
//匹配属性中含有class属性并且属性值中包含val的p元素

p[id^=val]{

}
//选择所有含有id属性以val开头的所有p元素

p[id$=val]{

}
//选择所有含有id属性的并且以val结尾的所有p元素