css选择器是什么？css选择器有哪些类型？

css选择器在css的学习中无疑是十分重要的，所以，什么是css选择器？css选择器有哪些类型？这是我们必须要掌握的，本篇文章将给大家来介绍关于css选择器的基本定义，以及css选择器有哪些类型。
我们话不多说，直接进入正题~~

css选择器是什么？

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

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

如图，我们可以知道：

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

选择器通常是您需要改变样式的 HTML 元素，如：p,body,h1等等

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

介绍完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）标签选择器：

效果如下：

（2）.类选择器：

效果如下：

（3）ID选择器：

效果如下：

（4）属性选择器：

效果如下：

（5）伪类选择器：

效果描述：

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

css选择器是什么？css选择器有哪些类型？相关推荐

html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
css选择器权重排序_CSS选择器的权重与优先规则
我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
CSS概念，引入，选择器
概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red"> ...
CSS学习04之层次选择器
回顾什么是选择器在 CSS 中,选择器是选取需设置样式的元素的模式. 选择器的作用 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 方便我们对元素添加样式. ...
html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...
使用css的类名交集复合选择器
首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选 ...
CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...

css选择器是什么？css选择器有哪些类型？

css选择器是什么？css选择器有哪些类型？相关推荐

最新文章

热门文章