css选择器

一、类选择器：

1.点号开始

2.包含字母、数字、连字符、下划线

3.点后面必须是字母开始

4.区分大小写

5.一个类选择器可以应用到多个标签

 

二、伪类选择器：

元素名称-伪类名称：

a：link（未访问）

a：visited（已访问）

a：hover（鼠标悬停）

a：active（点击时）

 

三、后代选择器：（可越级）

父级元素名称+空格+子级元素名称{声明块}

 

四、子级选择器：（不可越级）

父级元素名称+“>”+子级元素名称{声明块}

 

五、属性选择器：input type=“text”

格式一：元素名称[属性名称+属性值]{声明块}

             input[type=“text”]{color：red；} 【设置input属性值为text的样式】

input：：-webkit-input-placeholder{color：green；}【设置placeholder提示信息的样式】

 

格式二：选择以属性值开始的标签

元素名称[属性名称+“^=”+属性值]{声明块}

input[name^=“si”]{color：green；}

 

格式三：选择以属性值结束的标签

元素名称[属性名称+“$=”+属性值]{声明块}

input[name$=“chuan”]{color：green；}

 

格式四：选择包含属性值的标签

元素名称[属性名称+“*=”+属性值]{声明块}

input[name*=“chuan”]{color：green；}

 

格式五：选择box4里类型为p的第三个p元素

. box4 p：nth-of-type（3）{color：red；}

 

六、css两个核心概念：

1.继承：（1）是应用在某个标签/元素上的css属性传递给了内部嵌套的标签

            （2）通常来说文本类的会被继承（字体、字号、颜色）

            （3）chrome里面是灰色的表示没继承

2.层叠：（1）继承

            （2）一个标签可能有一个或多个样式的来源，当属性发生冲突时，按照加载顺序和权重大小决定

            （3）对比权重：样式不冲突：同时作用      

                                      样式冲突：对比权重①权重相同，后覆盖前

                                                                ②权重不同，权重大的生效

 

七、

1.border：1px solid red；边框

2.font-size：20px；字体大小，字号

3.font-family：Algerian；字体类型

4.font-weight：400；加粗

5.text-align：center；水平居中

6.text-indent：2px；

7.text-decoration：none；下划线

8.line-height：20px；行高

9.vertical-align：middle；垂直居中

10.text-shadow：-11px -11px 2px red；字体阴影

11.letter-spacing：10px；字间距

12.word-spacing：10px；词间距

13.font-weight：500；字体加粗

14.font-variant  字体大小写