css基础选择器教程,CSS基础入门及选择器

1.1什么是CSS？

Cascading Style Sheet 层叠级联样式表

CSS：表现层(美化网页)

字体，颜色，边距，高度宽度，背景图片，网页定位，网页浮动

2.快速入门

2.1 CSS的优势：

1.内容和表现分离

2.网页结构表现统一，由于css是靠link调用，可以像java中的自定义工具类一样实现复用

3.样式十分的丰富

4，建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录

2.2 CSS的三种导入方式：

行内样式：

我是标题

内部样式：

外部样式：

链接式

导入式，CSS2.1中使用的

@import url("CSS/SA.css");

3.选择器：

作用：选择页面上的某一个或者某一类元素

2.1：基本选择器

标签选择器：

*类选择器 class ：

/*类选择器的格式 .class的名称{}

好处 相同的标签可以使用不同的类选择器设置参数

不同的标签也可以选用相同的类选择器

*/

.xige{

color: #3cbda6;

}

.你大爷{

color: blue;

}

*id选择器：

/* id选择器格式：

#id名称{}

但是id必须保证全局唯一

优先级方面： id选择器不遵循就近原则，是固定的

id选择器>class选择器>标签选择器

*/

#xige{

color: blue;

}

.aaa{

color: blueviolet;

}

高级选择器：

层次选择器：

1.后代选择器：在某个元素后面所有的后代，包括后代的后代

/后代选择器：

此处的后代选择器是选定了body中所有的p标签，优先级更高

body p{

background: #3cbda6;

}

2.子选择器：顾名思义，代表只选定下一代的，后代的后代不会选定/

body>p{

background: blue;

}

3.相邻(兄弟)选择器 ：相邻兄弟选择器(选择向下一个兄弟)代表类元素同代相邻向下“一个”的标签，

.aaa + P{

background: crimson;

}

4.通用(兄弟)选择器 ：通用兄弟选择器，当前选中元素的向下的所有同代兄弟元素，不包含自己

.aaa~p{

background: crimson;

}

结构伪类选择器：

/选中目标(ul)的第一个子元素/

ul li:first-child{

background: chartreuse;

}

/选中目标(ul)的最后一个子元素/

ul li:last-child{

background: crimson;

}

/定位到父元素，并选中当前的第一个元素

只选中p1:

思路：选中当前p元素的父级元素，再选中父级元素的第一个，但是必须是当前元素(p)才会生效

如下的意思差不多为：p的父元素的第2个子元素

下面的括号中代表第几个子元素 此选择器是按照顺序选择，如果顺序对了，但是类型不对依然选择不了/

p:nth-child(2){

background: aqua;

}

/选中p的父元素的第二个'p类'子元素

此选择器是按照类型加顺序来选择的，精确性比上一个要高/

p:nth-of-type(2){

background: blueviolet;

}

属性选择器(重点常用)：

= 代表绝对等于

*= 代表包含这个元素

^= 代表以这个元素开头

$= 带表以这个元素结尾

属性选择器的格式：

a[]{}中括号内填写属性元素

例如：选中存在id的元素

a[id]{

background: blue;

}

选中id是first的元素

a[id=first]{

background: crimson;

}

/*选中class中含有links的元素*/

a[class*="links"]{

background: blueviolet;

}

/*选中href中以http开头的元素*/

a[href^=http]{

background: cadetblue;

}

/*选中href中以doc结尾的*/

a[href$=doc]{

background: aquamarine;

}