CSS样式之选择器

一、CSS选择器构成

CSS选择器是你想要改变样式的html元素，通俗的说，选择器可以改变html文件中标签的属性，这些属性可以是颜色，背景图，字体等。每个选择器有一条或多条声明，可以同时改变某个标签的一个或多个属性，每个属性和它的值用冒号分开，不同属性之间用分号隔开。

 h1{

                 font-family: "楷体";

                 color: red;

             }

在上述例子中，h1是选择器，也是html文件中的元素或标签；color、font-family是属性；red、"楷体"是值。

结果：

字体显示为楷体，颜色显示为红色

二、CSS选择器的种类

【通用选择器】
1.写法：*{}
2.作用：选中页面所有标签

*{

                color: red;

            }

结果：所有文字颜色变为红色

【标签选择器】
1.写法：HTML标签名{
　　　　　　样式属性:样式属性；
　　　　　　...
　　　　}
2.作用：选中页面所有对应标签

ol{

                font-family: "楷体";

                color: red;

            }

结果：对应标签中字体变为楷体，颜色变为红色

【类class选择器】
1.写法：.选择器class名称{}
2.用法：在需要改变样式的标签上使用class="选择器名称"，来调用对应选择器
3.作用：修改所有调用选择器的标签

.one{

                color: blue;

            }

结果：class为one的内容文字变为蓝色

【id选择器】
1.写法：#选择器名称{}
2.用法：在需要改变样式的标签上使用id="选择器名称"，来调用对应选择器
3.注意事项：同一页面的同一id是唯一的
4.作用：修改唯一id的样式

#two{

                font-size: 26px;

            }

结果：id为two的内容文字字体为26像素

【特殊选择器】
[后代选择器]
1.写法：选择器1 选择器2 选择器3 ...{}
例如：#div .li{}

div .li1{

            color: orange;

            }

[子代选择器]
1.写法：选择器1>选择器2>选择器3...{}
例如：#div>.ul>.li{}

div>ul>.li1{

                color: orange;

            }

注意：子代选择器与后代选择器的不同在于，子代选择器不能隔代。

举个形象的例子，后代选择器：爷爷我{}

　　　　　　　　子代选择器：爷爷>爸爸>我{}
[交集选择器]
1.写法：选择器1选择器2...{}
例如： .one#o{} 元素必须同时具备class="和"id=""才能生效
[并集选择器]
1.写法：选择器1,选择器2,...{}
例如：.f,#t{} 元素只需具备class=""或id="" 即可生效

【伪类选择器】
1、写法：选择器名称：伪类状态{}
常见伪类状态：link未访问状态、visited已访问状态、hover鼠标指上状态、active激活选定状态（鼠标点击未松开）、focus获得焦点时状态（inout常用）
2、超链接多种伪类共存时顺序：link(visited)-hover-active

a:link{

                 color: green;

             }

a:visited{

                 color: blue;

             }

a:hover{

                 color: red;

             }

a:active{

                 color: orange;

             }

input:focus{

                 color: green;

             }

结果：当鼠标放上去时显示伪类选择器设置的属性

三、选择器优先级

通用选择器<标签选择器<类选择器<id选择器<伪类选择器

优先级大的可以覆盖优先级小的属性值

巴特西

CSS样式之选择器

一、CSS选择器构成

二、CSS选择器的种类

三、选择器优先级

最新文章

热门文章