CSS选择器有哪些，选择器分类

css 3 day01

1. css3 简介

css3 是css2 的升级版本，在css2的基本上进行修改(包括：新增和删除)

css3兼容性问题，css3不兼容IE9以下的版本

css3 新的选择器，没有css2的选择器兼容性好.

2. css3 选择器

属性匹配选择器

1、全匹配

标签[属性名='属性值']{ }

2、开头匹配

标签[属性名^='属性值']{ }

3、结尾匹配

标签[属性名$='属性值']{ }

4、包含匹配

标签[属性名*='属性值']{ }

结构性伪类选择器

1、:nth-child () 选中第几个儿子，从 1 开始 ，还可以表示倍数

nth-child (2n) 选中第2、4、6.....

nth-child (2n+1) 选中第3、5、7....

nth-child (3n) 选中第3、6、9....

section>div:nth-child(3) 选中section下的第三个儿子，并且这个儿子是div

section>:nth-child(3) 选中section下的第三个儿子

:first-child 第一个儿子

:last-child 最后一个儿子

2、:nth-of-type() 选中父级下的第几个子级

section>div:nth-of-type(3) 选中section下的第三个div(只数div)

last-of-type 最后一个div

first-of-type 第一个div

3、:only-child 选中只有一个子级的

div>:only-child{ } 选中div下面只有一个元素的

div>p:only-child{ } 选中div下面的只有一个元素，并且这个元素是p

4、兄弟选择器

+(相邻的弟弟) ~(后面的所有的弟弟们)

section #div1~div 选择section下的id为div1的元素的所有弟弟

5、:not（） 不是，反选

p:not(.myp) 选中 p标签中 没有class名为myp 的标签

section div:not(#div1) 选中section下面的div并且id不是div1的div标签

6、:checked 选中的 （表单里面的单选和多选）

input:checked (选中input框中选中的input)

http://bugshouji.com/bbs-read-run?tid=1239 修改浏览器自定义样式

7、:disabled 选中 不可用的

input:disabled (选中input框中不可用的input)

8、:enabled 选中 可用的

input:enabled (选中input框中可用的input)

其他的伪元素

9、::placeholder 修改提示词(css4的东西，因为还没公布，所以用：：)

input::placeholder{} 注意兼容性

10、::selection 修改鼠标刮中时的效果

3. 圆角 border-radius 圆角

一个值 10px 四个角

两个值 10px 20px 左上右下10px 左下右上20px

三个值 10px 20px 30px 左上 右上左下 右下

四个值 10px 20px 30px 40px 左上 右上 右下 左下

八个值 5px 10px 15px 20px/15px 20px 30px 50px 矩形横竖两斜分成了四个角

参考：https://9elements.github.io/fancy-border-radius/ 用这个理解

百分数：相对自己的百分比

4. 阴影

box-shadow盒子阴影

box-shadow： x轴偏移量 y轴偏移量 阴影的模糊度 阴影的扩展半径 阴影的颜色 投影的方式

模糊度越大，越不饱和

投影的方式 ： 默认外投影 | inset 内投影

text-shadow 文本阴影

5. 文本溢出，显示省略号

单选文本：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

注意：单词会换行，中文会换行,没有空格长字符，默认不会换行

多行文本溢出显示 省略号：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

6. 换行处理

white-space属性

word-break：单词的换行

7. iconfont 的引入 / 引入字体图标

第一种引入方式：

1、https://www.iconfont.cn/ 使用微博账号登录

2、选中图标增加到购物车

3、在购物车中将所有的图标添加至项目

4、下载unicode类型，会下载一个压缩包

5、在页面中通过link标签引入 iconfont.css文件

6、在标签中添加改图标的类名，先添加一个iconfont的类型，再添加该图标的类名

第二种引入方式：

@font-face 自定义一个字体

5、在页面中引入 iconfont.ttf文件

6、在标签中添加该图标的unicode码

@font-face {

font-family: "guoxinan";

src: url("css/iconfont.ttf");

}

span{

font-family:guoxinan ;

font-size: 40px;

color:pink;

}

<span>&#xe71a;</span>

使用字体图标的好处：

1、让图标具有字体的属性，color font-size text-algin

2、大大降低了图片的大小以及服务器的请求次数

3、矢量图不失真，不会存在放大过后变模糊的情况

注：

after, before 伪元素里,content里可以写unicode编码;

8. 变换 transform

分四种:

平移

translate(x坐标，y坐标);

translateX(x坐标);

translateY(y坐标);

旋转

rotate()： 只能设置一个值 ，默认z轴

rotateX() : X轴

rotateY() ：Y轴

放大/缩放:

scale(0.5);

1: 保持不变 0:没有

一个值 ： 水平方向，垂直方向同时变化

二个值： scale(x轴的缩放,y轴的绽放);

scaleX(0.5): 水平方向变化

scaleY() :垂直方向变化

拉伸: skew

skew(x轴,y轴)

skewX()

skewY()

注： 变换，对盒子模型没有发生，位置没有发生变化，也不会影响其它元素

transform-origin:中心点设置

9. transition 过渡属性

transition : 过渡的属性 过渡时间 过渡类型 延迟时间