css选择器有什么类型

  介绍

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

<强> css选择器是什么?

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

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

 css选择器有什么类型

如图,我们可以知道:

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

选择器通常是您需要改变样式的html元素,如:& lt; p> & lt; body> & lt; h2>等等

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

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

<强> css选择器有哪些类型?

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

1,标签选择器(如:身体,div, p, ul,李)。

2。类选择器(如:类=癶ead"、类=癶ead_logo")。

3, ID选择器(如:ID=皀ame", ID=皀ame_txt")。

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

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

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

7,伪类选择器(如:就是链接样式,一元素的伪类,4种不同的状态:链接,访问,活跃,徘徊)。

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

<强>上述八种css选择器中最常用的css选择器是标签选择器,。类选择器,ID选择器,属性选择器,伪类选择器。

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

<强>(1)标签选择器:

& lt; html>   & lt; head>   & lt; meta  charset=癠TF-8"祝辞   & lt; title>标签选择器& lt;/title>   & lt; style 类型=拔谋?css"比;   跨度{颜色:绿色,字体大小:20 px}   & lt;/style>   & lt;/head>   & lt; body>   & lt; span> hello & lt; br/比;   & lt; span> world   & lt;/body>   & lt;/html>

效果如下:

 css选择器有什么类型

<强> (2)。类选择器:

& lt; html>   & lt; head>   & lt; meta  charset=癠TF-8"祝辞   & lt; title>类选择器& lt;/title>   & lt; style 类型=拔谋?css"比;   ,,,.style1 {background:绿色}   ,,,.style2{背景颜色:黄色}   & lt;/style>   & lt;/head>   & lt; body>   ,,,& lt; div  class =,“style1"祝辞div1
  ,,,& lt; div  class =,“style1"祝辞div2
  ,,,& lt; div  class =,“style2"祝辞div3