【零基础入门】 css学习笔记（3）选择器与层叠性

cppprimer 发布于2019-08-29 15:43 / 2608人阅读

摘要：，高级选择器后代选择器空格表示后代选择器就是的后代所有的。注意是后代，并不一定是儿子空格可以出现多次补充后代选择器中出现的东西很灵活，可以是标签，可以是名，可以是名后代选择器，就是一种平衡共性特性的平衡。

一，选择器 1，基础选择器

1）标签选择器：div{ } ，选择的所有，而不是一个，用来描述“共性”。
2）类选择器：.class名{ }

多个元素可以同时属于某一个类；

一个元素可以同时属于多个类选择器，中间用空格隔开，类名间的顺序不重

一个h3

不要去试图用一个类名，把某个元素的所有样式写完。这个元素要多携带几个类，共同实现这个元素的样式。

每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

3）id选择：#id名{ }
元素的id属性，一个元素只能有一个id，页面上不允许多个元素有相同的id。

问：到底用id还是用class？
答：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，
要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

2，高级选择器

1）后代选择器：空格表示后代选择器

.div1 p 就是.div1的后代所有的p。注意：是后代，并不一定是儿子；空格可以出现多次
补充：后代选择器中出现的东西很灵活，可以是标签，可以是class名，可以是id名
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

2）交集选择器：没有空格，挨着写的
h3.special{ color:red; }
选择的元素是同时满足两个条件：必须是h3标签，然后必须有special类
交集选择器，我们一般都是以标签名开头

3）并集选择器：用，号隔开
4）儿子选择器：用>号，IE7开始兼容，IE6不兼容。
与后代选择器区别：子选择器作用于第一代后代（即儿子），后代选择器作用于所有后代。
例子：

.food>li {border:1px solid red;} //儿子选择器

.food li {border:1px solid red;} //后代选择器

5）下一个兄弟选择器：用+号，表示选择下一个兄弟；IE7开始兼容，IE6不兼容。
例子：h3+p {color: red;}

6）序选择器：IE8开始兼容，IE6，7不兼容。

ul li:first-child{ color:red; }//选择第一个li
ul li:last-child{ color:red; }//选择最后一个li

二、层叠性

1，如果多个选择器应用到同一个元素，如何确定元素究竟用哪些样式呢？
浏览器是以层叠方式来确定具体使用哪一样样式。即哪一个选择器更特定，就运用该选择器对应的样式。
2，层叠性：就是css处理冲突的能力。
3，如何计算特定性：

4）把上面三位数组合在一起当成真正的数来读：比如100 > 010> 001，得到的特定数越大，这个规则就越特定。
4，案例：
例1：

.special2：  010             
.special1：  010          
 css文件中位置越靠后，优先级越高。因此显示.special2的颜色

注：同一个元素，有多个类选择器修饰，属性描述有冲突，只与在css中类名的先后顺序有关，与在标签中类名的书写顺序无关。

例2：

#box1 .hezi2 p ：             111
div div #box3 p ：            103
div.hezi1 div.hezi2 div.hezi3 p ： 034        
 因此显示red颜色

例3：
注：下图中前两个css规则不是直接描述p的样式，因此对于p元素来说，权重为0。第三个规则直接描述p元素，权重为001。

例4：

css规则中若没有直接描述p的规则，则使用继承。浏览器会查看p元素的祖先，从它的父元素开始，尝试找到color属性值。
p元素的父元素为，计算其权重，该div显示red颜色，则p为红色

5，!important：给一个属性提高权重。这个属性的权重就是无穷大。
1）但在一个选择器中，它写在一个属性后面，只是提升的该属性的权重，并不会提升选择器的权重。
2）而且它无法提升继承的权重，该是0还是0。

GPU云服务器云服务器基础选择器css 零基础入门学习零基础入门深度学习零基础入门学习python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113507.html

【零基础入门】 css学习笔记（1）字体颜色样式等

摘要：在元素中使用元素是一个元素，没有结束标记表示链入的是样式表，在中可省略不写。一般页面中，中文用宋体黑体微软雅黑，英文使用。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。表示方法可用像素指定或使用或百分数相对于字体大小指定。一、基础介绍 1， css：cascading style sheet 层叠式样式表2，语法：p {background-color:red...

fai1017 2019-08-30 15:53 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

mingzhong 2019-08-30 15:55 评论0 收藏0
前端菜鸟笔记 Day-3 CSS基础

摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。文章大纲来源：【Day 3】HTML复习 + CSS基础初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。内容引用：CSS 简介样式解决了什么问题？ HTML...

DangoSky 2019-08-02 14:12 评论0 收藏0
【零基础入门】 css学习笔记（2）盒模型

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。盒模型 1，盒模型： CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。 2，五个属性：从内往外： width:内容的宽度，而不是盒子的宽度； hei...

mrcode 2019-08-30 15:53 评论0 收藏0
CSS超全笔记（适合新手入门）

摘要：选择器和类选择器区别标准规定，在同一个页面内，不允许有相同名字的对象出现，但是允许相同名字的。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）...

番茄西红柿 2019-04-23 11:56 评论0 收藏0