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

CSS的基本选择器(三种)

id或者class值不能用纯数字表示 可以有 “字母数字-_“

1.元素选择器                                         h1{.......}

2.ID选择器      只能作用于一个标签 因为一个页面中的id不能重复       #id1{......}

3.类选择器    可以作用于多个标签                                .class1{......}

CSS的其他选择器

在不更改内容的情况下(不添加id或class来使用基本选择器)使用其他选择器

后代选择器去掉空格就是交集选择器,4 5中选择器不是必须元素选择器开头

1.通用选择器 *{ margin: 0; padding: 0;} 作用于全部元素

2.交集选择器 #id1.class2{} 选择器1选择器2选择器3........

选择器紧挨着没有间隙 必须同时满足这些选择器的元素才可以被修饰

3.并集选择器 #id1,.class2{} 选择器1,选择器2,选择器3

选择器之间用逗号隔开 满足其中一个选择器就可以被修饰

4.后代选择器 div ul .id1{} .class1 #id1 .class2{}

选择器之前用空格分割 后一个选择器是前一个选择器的后代(包括隔代)才被修饰

5.子代选择器 div>.id1 .class1>#id1{}

后一个选择器是前一个选择器的直接后代才被修饰

6.属性选择器

<input type="password"/> input[type=‘password’]{......}

优先级

第一原则: 近者优先,作用于最里层的选择器,生效

同一个标签时: id选择器>类选择器>标签选择器>通用选择器

<div class="class1" id="id1" style="style1"></div>

  1. 标签选择器 占权重1
  2. 类选择器 占权重10
  3. id选择器 占权重100
  4. 行级样式表 占权重1000
  • 当交集后代子代选择器都指向一个标签时 通过权重相加 去高数值的 如果数值相同 则取后一个
  • 并集选择器将代码分开 不能通过权重相加计算

如果4个选择都指向一个标签 则取他们所有的修饰,相同属性的取优先级最高的值

时间: 2024-10-13 16:04:34

CSS中几种选择器和他们的优先级的相关文章

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的三种选择器

css概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. css基本语法 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中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选

css中三种定位详细介绍

在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法. 定位方式:是指如何确定某个标签在页面中的位置. 1.固定定位:始终相对于浏览器窗口进行定位 1 <html> 2 <head> 3 <title>定位方式-固定定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body

作为初学者如何高效快速辨别使用css中不同的选择器

首先,晒出自己的第一次作品,以次当作对日后的鼓励. 作为一个css初学者,一开始接触到许多的选择器还是有些头疼的,特别是看到style中的符号不能第一时间判断出这是哪个选择器时.先列出目前所学的选择器及格式:1.标签选择器  div{ backgound-color:^;   width:^;   height:^; magin:^,^,^,^; padding:^,^,^,^; } 2.类选择器    .lei{ 同上 } 3.ID选择器  #ID{ 同上 } 4.分组选择器 DIV,SPAN

css中三种隐藏方式

1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black  显示 display:none  隐藏 3.visibility 隐藏占据原来的文档,不会让出原来所占的空间. visibility:hidden 隐藏 visibility:visible 显示

css四种选择器总结

css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重.   做为后端开发者来说,学好css样式也是快速入门各类框架的基础,也是做为一名全栈工程师必备的知 识,下面来说说css中重要的选择器,       在css中常见的选择器有四种常见,说到选择器就不得不说css引入文件的常见的三种方法,1,内联文件,2,外部文件,3.内嵌文件 ,其中三种常规的例子如下 1,

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{