css中选择器的使用

css是英文Cascading Style Sheets的缩写。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。我们再将html比喻为树干的时候,css比喻为叶子,花。那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

  css的选择器可分为:1、id选择器;2、class类别选择器;3、元素选择器;4、属性选择器;5、伪类选择器;6、伪元素选择器;7、通用选择器。

  id选择器是根据元素id来选择元素,具有唯一性,前面以”#”号来标志。

  class类别选择器是根据类名来选择,前面以”.”来标志,在HTML中,元素可以定义一个class的属性。注意id是唯一的,class可以重复。如p,h1等

  元素选择器:也为标签选择器,一个完整的HTML页面是有很多不同的标签组成,标签选择器则是决定哪些标签采用相应的CSS样式。

属性选择器:对HTML中某一属性进行选择。比如对于input或有text、email、password等属性,对其某属性进行控制样式

  伪类选择器::link、:hover、:action、visited。

  伪元素选择器:如before、after、first等

  通用选择器:以*表示,控制整篇网页。

  为了更好的控制HTML的元素样式,我们要灵活运用css选择器,一般不要超过三重。

时间: 2024-08-26 08:09:54

css中选择器的使用的相关文章

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式.这个时候,你可能就得考虑是不是没考虑优先级问题了. 当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题. 下面列出的就是是选择器的优先级: 行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

css中选择器优先级问题详解

先根据引入方式分:内联样式,头部样式,外部引入:这三个的优先级依次降低: 相同的引入方式时,根据选择器优先级判断显示哪个样式,具体规则如下: 将选择器的特殊性分为4个等级,a,b,c,d 行内样式,a=1 b 是ID选择器的总数 c 是类,伪类,属性选择器的总数 d 是元素(类型),伪元素选择器的总数 举例说明:   选择器 特殊性 以10为基准的特殊性 1 style="" 1,0,0,0 1000 2 #id01 #id02{} 0,2,0,0 200 3 #id .class{}

CSS中的id选择器和class选择器简单介绍

<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 id选择器: HTML中的元素属性用id来设置id选择器,CSS中的id选择器是用"#"来定义的 比如: #para1 { text-align:center; color:red; } 这样就定义了一个选择器,什么是选择器,在网上查的是说需要改变的HTML元素,很正确,在一开始我们的内部样

CSS中几种选择器和他们的优先级

CSS的基本选择器(三种) id或者class值不能用纯数字表示 可以有 "字母数字-_" 1.元素选择器                                         h1{.......} 2.ID选择器      只能作用于一个标签 因为一个页面中的id不能重复       #id1{......} 3.类选择器    可以作用于多个标签                                .class1{......} CSS的其他选择器 在不更改内

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真

css中的选择器

1.在html中引入css的方法:四种方式: a.行内式(也称内联式) 如: <h1 style="color:red;test</h1> b.内嵌式 <style type="text/css"> h1{ color:red; font-size: 10.5pt; font-family: Calibri, sans-serif; line-height: normal; widows: auto;">