css选择器有什么类型-创新互联

小编给大家分享一下css选择器有什么类型,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联主要企业基础官网建设,电商平台建设,移动手机平台,小程序制作等一系列专为中小企业定制网站开发产品体系;应对中小企业在互联网运营的各种问题,为中小企业在互联网的运营中保驾护航。

css选择器是什么?

在百度百科中,我们可以看到css选择器的基本定义是:每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。说了这么一大段话,其实简而言之,就是要使用css对html页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,html页面中的元素就是通过CSS选择器进行控制的。(推荐视频教程:CSS教程)

接下来我们就来看一个图,是对上述定义具体的分析。

css选择器有什么类型

如图,我们可以知道:

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

选择器通常是您需要改变样式的 HTML 元素,如:

,,

等等

每一条格式声明语句由“属性名:属性值”对组成,属性名和属性值间以冒号隔开,每条声明语句以英文状态下的分号“;”结束。

介绍完css选择器是什么后,我们下面就来看看css选择器有哪些类型?

css选择器有哪些类型?

css选择器的种类是有很多的,下面我们就来看一看css选择器的类型

1、标签选择器(如:body,div,p,ul,li)。

2、.类选择器(如:class="head",class="head_logo") 。

3、ID选择器(如:id="name",id="name_txt")。

4、全局选择器(如:*号)。

5、.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)。

6、.继承选择器(如:div p,注意两选择器用空格键分开)。

7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)。

8、字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 。

上述八种css选择器中最常用的css选择器是标签选择器、.类选择器、ID选择器、属性选择器、伪类选择器。

下面我们就分别对这五个css选择器来举一个例子:(其他选择器例子可以参考css手册)

(1)标签选择器:




标签选择器

span{color: green;font-size: 20px}



hello
world

效果如下:

css选择器有什么类型

(2).类选择器:




class选择器

    .style1{background-color: green}
    .style2{background-color: yellow}



    div1

    div2
    div3

效果如下:

css选择器有什么类型

(3)ID选择器:




ID选择器

    #div1{background-color: yellow}
    #div2{background-color: green
    }



    div1
    div1     div2

效果如下:

css选择器有什么类型

(4)属性选择器:




属性选择器

    input[type = 'text'] {background-color: gray}
    input[type = 'password'] {background-color: pink}



    
        name:
        pass:     

效果如下:

css选择器有什么类型

(5)伪类选择器:




伪类选择器
    
        a:link{color:yellow ;font-size: 50px}
        a:hover{color:green;font-size: 50px}
        a:active{color:blue;font-size: 50px}
        a:visited{color:red;font-size: 50px}
    


    点击

效果描述:

打开网页时标签为黄色
将鼠标放在标签上时标签为绿色
点击标签时标签为蓝色
点击后标签为红色

以上是“css选择器有什么类型”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!


网站名称:css选择器有什么类型-创新互联
分享地址:http://ybzwz.com/article/dghdjg.html