css–概述、选择器

目录

一、概述

1.1 语法

1.2 css的特点

1.3 css的注释

1.4 常见属性介绍

1.5 Css的书写位置(引入方式)

1.6 link和@import的区别

1.7 css书写方式之间的区别

1.8 颜色的表达方式

二、选择器概述

2.1 选择器分类

2.2 选择器的优先级

三、基础选择器

3.1 标签(元素)选择器

3.2 类选择器

3.3 ID选择器

3.4 通配符选择器

3.5 交集选择器（标签指定选择器）

3.6 后代选择器  选中所有的后代

3.7 子代选择器：>   只能选中儿子

3.8 并集选择器

3.9 伪类选择器  爱恨法则 L(link)OV(visited)EH(hover)A(active)TE

3.10 元素关系选择器

3.11 序号选择器

3.12 属性选择器

3.13 css3新增伪类

3.14 伪(对象)元素选择器

3.15 总结

一、概述

CSS 指层叠样式表 (Cascading Style Sheet)，也称级联样式表，简称样式表，用来给html添加样式的语言。 具有继承性、层叠性以及优先级。

1.1 语法

CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（ property ） 是您希望设置的样式属性（ style attribute ） 

每 个属性有一个值。 属性和值被冒号分开

1.2 css的特点

  • 继承性 子元素可以继承父元素的样式；有继承性的属性：color，font-*，text-*，line-height，但有些属性不能继承， 比如： border 、 padding 、 margin
  • 层叠性 一个元素可以同时设置多个样式。简单的说， 层叠就是对一个元素多次设置同一个样式， 这将使用最 后一次设置的属性值。 例如对一个站点中的多个页面使用了同一套 CSS 样式表， 而某些页面中的某些元素想使用其他样式， 就可以针 对这些样式单独定义一个样式表应用到页面中。这些后来定义的样 式将对前面的样式设置进行重写， 在浏览器中看到的将是最后面设 置的样式效果
  • 优先级 当你样式冲突时，优先级高的样式生效；优先级相同时，后写的样式生效(html、css、JavaScript由浏览器解析执行，由上往下，由左到右的顺序执行)

1.3 css的注释

快捷键：

多行注释  ctrl + /

单行注释  ctrl + shift + /

注意：注释之间不能嵌套

1.4 常见属性介绍

常见属性
属性 解释 书写规范示例
width 宽度 width:300px;
height 高度 height:300px;
color 文本颜色 color:red;
background-color 背景颜色 background-color:green;
font-size 字体大小 font-size:34px;
text-align 文本水平对齐方式 text-align:left|center|right;
text-indent 首行缩进 text-indent:2em;

1.5 Css的书写位置(引入方式)

  • 内嵌(内部)式：

写在<head></head>里边，<style type=”text/css”>样式表内容</style>

例子：

  • 外链式（推荐）：

优点：多个html网页可以共用一个css样式表文件

例子：

  • 导入式：IE5以上才能兼容

特点：使用导入式引入的样式表时，会增加页面的http请求，而不会等待css文件加载完毕，会立即渲染html结构，所以页面会有几秒钟的“素面朝天”的时间。

例子：

  • 行内(内联)式：利用style属性直接在标签上书写样式

特点：牺牲了样式表的批量设置样式的功能，只能给一个标签设置样式，所以不常用。

例子：

1.6 link和@import的区别

<link rel="stylesheet" type="text/css" href=".css"/>
<style>@import url(".css")</style>

  • 都可以在html中引入css文件

  • 本质上，link是服务于整个网页，而@import是服务于css

  • 区别：

    1. link是一个标签，@import是一种语法（务必写在style标签中，后面直接加文件路径）

    2. link不只可以引入css文件，还可以引入其他文件格式，@import只能引入css文件

    3. 加载时间：link加载css文件，随着页面的加载而加载，@import等待页面加载完成之后再加载css文件

    4. 兼容性：link兼容比@import要好一些

    5. JavaScript可以操作link引入样式，@import不能被操作

1.7 css书写方式之间的区别

☞内嵌(内部)式写法：

         ◆代码可维护性较差，没有实现css代码与html结构的完全分离

         ◆影响的范围只有当前页面

☞行内式(内联式)写法：

              ◆代码可维护性极差，css代码和html结构没有实现分离

              ◆影响的范围只有当前标签

☞外联式写法：

               ◆代码可维护性高，css与html结构完全分离

               ◆影响范围广，当前整个网页站点。

注意：

1.8 颜色的表达方式

  • 直接写颜色名称 
        div {font-size: 30px;color: red;}

  • 十六进制

 0-f,一共16个数值
 利用的是三个最基本的色彩：红、绿、蓝
解析：#ff0000,前边2个数值对应的是红色，中间2个对应的是绿色，后边2个对应的是蓝色
注意：对于六个数值都是一样的，则可以简写成三个数值，例如黑色#000000;则可以简写成为：#000;，依次类推。

div {font-size: 30px;color: #f40;}

  • rgb色值

原理： R:红色； G:绿色； B:蓝色
**取值范围** ：0-255

div {font-size: 30px;color: rgb(0,0,0);}

  • rgba    

 原理：R:红色； G:绿色； B:蓝色
取值范围：0-255
其中a代表的是透明度，也就是alpha,值为0-1.

二、选择器概述

 

浏览器解析CSS的方式是从右向左进行解析的，这样做的目的就是为了加快浏览器对CSS的解析速度，使其可以更快的匹配到哪些元素是哪些元素不是

 

2.1 选择器分类

  • 基础选择器:

     ◎标签选择器  a

     ◎类选择器(重点)  .box

     ◎id选择器(js里的重点)  #a

     ◎通配符选择器 (*)

  • 复合选择器

     ◎交集选择器（标签指定式选择器）div .box

     ◎后代选择器（重点） a b

     ◎并集选择器 a,b,c…

     ◎直接子代选择器 a>b

     ◎通用兄弟选择器 a~b

     ◎相邻兄弟选择器 a+b

     ◎伪类选择器 a:link，a:visited，a:hover，a:active （爱恨法则）

     ◎序号选择器(:first-child :last-child nth-of-type(n) nth-child(n)等)

     ◎属性选择器(a=”b” a*=”b”  a^=”b”、a$=”b”等)

2.2 选择器的优先级

!important(无穷)>行内样式(1000)>id选择器(100)>类选择器/属性选择器/伪类(10)>标签选择器/伪元素(1)>通配符选择器(0)

加法计算：

  • 内联样式权重默认为1000

  • id选择器权重默认为100

  • 类选择器（属性选择器、伪类）权重为10

  • 元素选择器（伪元素）权重为1

  • 继承的属性权重为0

注意：在加法运算中，不满足满10进1的说法

4个0的计算方式：

（1，0，1000，0） （1,2,0,5） (1,0,0,0)

  • 第一个0代表是否有内联样式，有则为1，无则为0

  • 第二个0代表id选择器的个数

  • 第三个0代表类选择的个数

  • 第四个0代表标签选择器的个数

从第一个0开始进行对比，如果不同，值大的选择器权重最大，如果相同对比第二个值，依次类推

三、基础选择器

3.1 标签(元素)选择器

作用：给指定的标签添加样式。覆盖面很大，通常用于标签的初始化操作。

语法：标签{属性:值;属性:值;}

例子：

 <style>p{font-size: 14px;text-indent: 2em;color: orange;}</style>
 <!--格式:x{...}--><p>可奈何我们总是轻视时间，小瞧现实，疏忽对方，只顾一个劲地踩着脚下的路低着头途前行着，却听不见彼此心底最真切的呼唤，突然一次转身，已发现身后早已没有了对方的身影，只剩下天涯漠然与自己对望，云烟穿过了人间树梢。你遗留在我身边的旧物，我都一一带到了这里，像领着一个个小小的你，偶然间拾起，便又想起了你，不知道没有了我，你的生活是不是就会多了几分绿意。时间是个奇怪的老头儿，颤颤巍巍的送走了一个又一个我们。而我恰恰是个喜欢恋旧的人，对于过去的种种仍历历在目，就像身处在影院里，即便努力学习接纳没有你的事实，但面对你的所有，我尽是无力地承接与贮藏，显得如此没有出息。原谅我始终都没有聪明过，哪怕是在自己面前，也依旧喜欢自己骗自己。你离开后，我心上再没一个人停留，空空荡荡的，像一片失落的沙洲，前后踏足于此的是一个个寂静而悲伤的黑夜。从前的记忆像一颗巨大而透明的弹珠，在这些旧物陈列的房子里横冲直撞。我们最好和最坏的时光在这里，我们有过的努力和不幸也在这里。</p>

3.2 类选择器

语法：类名{属性:值；}

特点：类样式表必须在相应的标签调用才生效，谁调用，谁改变。

          可以多个标签调用同一个类样式。

          同一个标签可以调用多个类样式，中间需要空格隔开。

 <style>.font200 {font-size: 200px;}.G {color: #000099;}.o1 {color: #990000;}.o2 {color: orange;}.g {color: #000099;}.l {color: #009900;}.e {color: #990000;}</style>
  <!-- 格式：.x{...} --><span class="G font200">G</span><span class="o1 font200">o</span><span class="o2 font200">o</span><span class="g font200">g</span><span class="l font200">l</span><span class="e font200">e</span>

类命名规范

◎不能使用纯数字或者数字加英文来命名类名称。

◎不推荐使用汉字来给类命名。

◎不能以特殊符号给命名（_除外）。

◎不推荐使用标签代码或者样式的属性来命名类名称。

补充：原子类

3.3 ID选择器

语法：#自定义名称{属性:值;}

特点：

一个页面只能调用一次，ID选择器配合JS使用。

一个标签只能调用一个ID选择器。

例子：

<style><!--#text1,text2这是错误的写法，一个标签只能调用一个ID选择器-->#text1{ font-size: 14px;color: cadetblue;text-indent: 2em;}#text2{font-family: Arial, Helvetica, sans-serif;font-size: 16px;color: #f40;text-indent: 2em;}
</style>
 <!-- 写法：#属性名称{} --><p id="text1">庆幸往昔一路是你陪我走来，在爱的颠簸旅途里，坚持是不易的，携手到老更是曲折的。你说人生路长，想去看没有边际的海洋。你身上寄居着一个孤独的幽灵，像夜里频频闪出白光的刀锋。我喜欢你笑的时候，天上的白云飘得很低很低，柳树上的叶子被光吻得明亮。很多时候我都觉得自己路过你世界的使命，是使幽灵晚一点、慢一点伤害你，吞噬你。我相信我们的共同努力可以使它退出世界，你将时刻明媚，如太阳的女儿。</p><p id="text2">可奈何我们总是轻视时间，小瞧现实，疏忽对方，只顾一个劲地踩着脚下的路低着头途前行着，却听不见彼此心底最真切的呼唤，突然一次转身，已发现身后早已没有了对方的身影，只剩下天涯漠然与自己对望，云烟穿过了人间树梢。你遗留在我身边的旧物，我都一一带到了这里，像领着一个个小小的你，偶然间拾起，便又想起了你，不知道没有了我，你的生活是不是就会多了几分绿意。时间是个奇怪的老头儿，颤颤巍巍的送走了一个又一个我们。而我恰恰是个喜欢恋旧的人，对于过去的种种仍历历在目，就像身处在影院里，即便努力学习接纳没有你的事实，但面对你的所有，我尽是无力地承接与贮藏，显得如此没有出息。原谅我始终都没有聪明过，哪怕是在自己面前，也依旧喜欢自己骗自己。你离开后，我心上再没一个人停留，空空荡荡的，像一片失落的沙洲，前后踏足于此的是一个个寂静而悲伤的黑夜。从前的记忆像一颗巨大而透明的弹珠，在这些旧物陈列的房子里横冲直撞。我们最好和最坏的时光在这里，我们有过的努力和不幸也在这里。</p>

3.4 通配符选择器

语法：*{属性:值;}

*代表所有标签，会给所有的标签加上样式。会增加服务器和浏览器压力，不推荐使用。

例子：

 <style>*{color: #f40;/*font-size: 14px;*/text-indent: 2em;/*font-style: italic;*//*font-weight: bolder;*/letter-spacing: 0.25em;/*font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*//**综合写法 font:style weight size line-height family;   其中没有的可以省略，但是必须保留font-size和font-family  **/font: italic bolder 14px Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}</style>
 <!-- 格式：*{....} --><p>庆幸往昔一路是你陪我走来，在爱的颠簸旅途里，坚持是不易的，携手到老更是曲折的。你说人生路长，想去看没有边际的海洋。你身上寄居着一个孤独的幽灵，像夜里频频闪出白光的刀锋。我喜欢你笑的时候，天上的白云飘得很低很低，柳树上的叶子被光吻得明亮。很多时候我都觉得自己路过你世界的使命，是使幽灵晚一点、慢一点伤害你，吞噬你。我相信我们的共同努力可以使它退出世界，你将时刻明媚，如太阳的女儿。</p><p>可奈何我们总是轻视时间，小瞧现实，疏忽对方，只顾一个劲地踩着脚下的路低着头途前行着，却听不见彼此心底最真切的呼唤，突然一次转身，已发现身后早已没有了对方的身影，只剩下天涯漠然与自己对望，云烟穿过了人间树梢。你遗留在我身边的旧物，我都一一带到了这里，像领着一个个小小的你，偶然间拾起，便又想起了你，不知道没有了我，你的生活是不是就会多了几分绿意。时间是个奇怪的老头儿，颤颤巍巍的送走了一个又一个我们。而我恰恰是个喜欢恋旧的人，对于过去的种种仍历历在目，就像身处在影院里，即便努力学习接纳没有你的事实，但面对你的所有，我尽是无力地承接与贮藏，显得如此没有出息。原谅我始终都没有聪明过，哪怕是在自己面前，也依旧喜欢自己骗自己。你离开后，我心上再没一个人停留，空空荡荡的，像一片失落的沙洲，前后踏足于此的是一个个寂静而悲伤的黑夜。从前的记忆像一颗巨大而透明的弹珠，在这些旧物陈列的房子里横冲直撞。我们最好和最坏的时光在这里，我们有过的努力和不幸也在这里。</p>

3.5 交集选择器（标签指定选择器）

语法：标签.自定义名称{属性:值;}

关系：即……又…….,既要满足标签，还要满足标签后边的样式文件

例子：

 <style>.text{font-size: 14px;text-indent: 2em;}div.text{color: #f40;}p#text1{text-indent: 2em;font-size: 14px;color: orchid;}
</style>
  <!--格式:标签+类(ID)选择器{...}且中间没有空格--》div.text{}--><div class="text">可奈何我们总是轻视时间，小瞧现实，疏忽对方，只顾一个劲地踩着脚下的路低着头途前行着，却听不见彼此心底最真切的呼唤，突然一次转身，已发现身后早已没有了对方的身影，只剩下天涯漠然与自己对望，云烟穿过了人间树梢。你遗留在我身边的旧物，我都一一带到了这里，像领着一个个小小的你，偶然间拾起，便又想起了你，不知道没有了我，你的生活是不是就会多了几分绿意。时间是个奇怪的老头儿，颤颤巍巍的送走了一个又一个我们。而我恰恰是个喜欢恋旧的人，对于过去的种种仍历历在目，就像身处在影院里，即便努力学习接纳没有你的事实，但面对你的所有，我尽是无力地承接与贮藏，显得如此没有出息。原谅我始终都没有聪明过，哪怕是在自己面前，也依旧喜欢自己骗自己。你离开后，我心上再没一个人停留，空空荡荡的，像一片失落的沙洲，前后踏足于此的是一个个寂静而悲伤的黑夜。从前的记忆像一颗巨大而透明的弹珠，在这些旧物陈列的房子里横冲直撞。我们最好和最坏的时光在这里，我们有过的努力和不幸也在这里。</div><p class="text">也想过在这夜中，如果我们中有一人迷路了，最后一定可以找回彼此，可最终都消失在了黑夜里。我相信这世间每一条道路都会把你带回我身边，你始终是我的终点，可最后愿望又一次次地从我精心编织的网里逃走。
你走后身边的朋友经常替我们感到可惜，其实他们都习惯了沉溺在别人的忧伤里以取得凡庸生活的快感，在自己杜撰的真相里自得其乐。我们在一起多久了？分开后是否还会想念对方？将来在某个街头相遇还会一眼认出对方或是插肩而过？这些都是没有必要深究的问题，因为答案已无意义。</p><p id="text1">关于你的离开，我明白其中的原因。很多人在一起并不是为了要过一生，而只是为了陪伴对方成长，到某一程，然后像使命完成一样，在某个时刻悄然离开。性格、距离、物质、三观、爱好 ，都是其次的原因。</p>

3.6 后代选择器  选中所有的后代

语法：选择器+空格+选择器+空格+….选择器{属性:值;}

作用：选择一个标签后代标签里所有满足条件的标签。

特点：

※必须是包含关系，父元素选择器写在前，子元素选择器写在后，通过空格链接在一起。

※标签选择器、类选择器、ID选择器可以自由组合，只要能代表父子关系即可。

※只要能代表父子，可以无限制的隔代。

例子：

 <style>div p span{font-size: 50px;}.box span{color: orchid;}.box .text{color: red;}
</style>
   <!-- 格式：选择器+空格+选择器{...} --><div class="box"><p><span>哈哈哈哈哈哈</span><span class="text">哦哦哦哦哦哦哦</span></p></div><div><span>嘿嘿嘿嘿嘿嘿</span></div>

3.7 子代选择器：>   只能选中儿子

语法：选择器1 > 选择器2 {属性:值};

 <!--子代选择器只能选择作为某元素子元素(亲儿子)的元素其写法是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接--><style type="text/css">div > span{color: red;font-size: 56px;}</style>
  <!--格式：(.)x > y{...}--><div><p><span>jack</span></p><span>marray</span></div>

3.8 并集选择器

将不同选择器之间相同的样式写在一起，选择器之间通过逗号链接在一起。

语法：选择器+，+选择器+，+选择器{属性:值;}

特点：可以是标签选择器、类选择器、ID选择器、后代选择器、交集选择器通过逗号自由组合在一起。

例子：

  <style type="text/css">.text1,#text,span,h1{font-size: 14px;color: #fff;background-color: green;}</style>
  <!--格式：x,y{}  元素之间用逗号分开，逗号理解为 和 的意思  通常用于集体声明，所有选择器都会执行后面的样式--><div class="text1">嗯嗯</div><p id="text">哈哈</p><span>嘿嘿</span><h1>我我</h1>

3.9 伪类选择器  爱恨法则 L(link)OV(visited)EH(hover)A(active)TE

a{}与a:link{}实现的效果是一样的

获取焦点（光标）的时候的样式   :focus{}

 <style type="text/css" rel="stylesheet">a:link {color: #333;text-decoration: none;}a:visited {color: orangered;}a:hover {color: #0A7EC3;}a:active {color: #0E9B7D;}
</style>
 <a href="https://home.firefoxchina.cn/">我们的我们，终是过去的的过去</a>

3.10 元素关系选择器

公共部分：

  <div><p>aaa</p><p>bbb</p><p>ccc</p></div><p>ccc</p><p>ddd</p><p>eee</p>

相邻兄弟选择器：+ 只能选中相邻的后面的一个 

例子：

 <style>div+p {color: red;}</style>

子选择器：.box>p à.box 后面的直接子元素 

例子：

 <style>div>p {color: pink;}
</style>

通用兄弟选择器：~   选中后面所有满足条件的兄弟

 <style>div~p {color: greenyellow;}</style>

3.11 序号选择器

Odd    奇数

Even   偶数

例子：

<style>ol :first-child {color: pink;}ol :last-child {color: skyblue;}ol :nth-child(2n) {color: greenyellow;}
</style>
<ul><li>家用电器</li><ol><li>冰箱</li><li>洗衣机</li><li>空调</li></ol></ul><ul><li>清洁用品</li><ol><li>洗衣液</li><li>消毒液</li><li>洗厕液</li></ol></ul><ul><li>妇婴用品</li><ol><li>奶粉</li><li>纸尿布</li><li>奶瓶</li></ol></ul>

3.12 属性选择器

<style type="text/css">input[type=text] {width: 300px;height: 100px;background: red;}div {color: red;}/*div[class=pwd]或div[class^=p]或div[class$=pwd]...*/div[class$=pwd] {background-color: yellow;}
</style>
<input type="text"><input type="password"><input type="button"><input type="submit"><br><br><br><br><br><div class="name">name</div><div class="pwd">pwd</div>

3.13 css3新增伪类

:only-child  选择器匹配属于父元素中唯一子元素的元素 

:not(selector) 选择器匹配每个元素是不是指定的元素 / 选择器

 <style>p {width: 100px;height: 100px;background-color: palegreen;}p:empty {background-color: palevioletred;}input:focus {background-color: pink;}input:disabled {border: 2px solid #000;}input:enabled {border: 3px solid #999;}input:checked+span {color: purple;}:root {font-style: 40px;}
</style>
 <p class="para"></p><p class="para"></p><p class="para">123</p><p class="para"></p><p><input type="text"><input type="text"><input type="text" disabled></p><br><br><br><p><input type="checkbox"><span>文字</span><input type="checkbox"><span>文字</span><input type="checkbox"><span>文字</span><input type="checkbox"><span>文字</span></p>

3.14 伪(对象)元素选择器

1.既可以用双冒号表示也可以用单冒号表示，IE8可以兼容单冒号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p::before {content: " ";display: inline-block;border: 10px solid transparent;border-right: 10px solid #f40;}p::after {content: " ";display: inline-block;border: 10px solid transparent;border-left: 10px solid #f40;}</style>
</head>
<body><p>123a</p>
</body>
</html>

2.只能用双冒号表示

<style>a::before {content: "★";}a::after {content: "●";}.box {width: 200px;height: 400px;border: 1px solid #ccc;}/*应用于文档中被用户高亮的部分（使用鼠标圈选的部分）*/.box::selection {background-color: red;}/*选中某元素中（必须是块级元素）第一行的第一个字母*/.box::first-letter {font-size: 50px;}/*选中某元素中（必须是块级元素）第一行的全部文字*/.box::first-line {color: salmon;}</style>
 <a href="">1</a><br><br><a href="">2</a><div class="box">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>

3.15 总结

1. 伪元素&伪类的特点

  • 伪元素和伪类都不会出现在源文档或者文档树中
  • 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
  • 伪元素名和伪类名都是大小写不敏感的，有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）

2. 伪元素和伪类区别：

  • 伪类用于向某些元素添加特殊效果（单冒号）

  • 伪元素用于在某些元素内容前后添加区域，这个区域可以控制样式（双冒号）

3. css继承性

  • css继承的概念：子元素继承父元素样式
  • css中有很多的属性，并不是所有的属性都可以被继承，有些可以，有些默认不可以继承，还有些不能被继承

继承分为两种：

  • 自动继承：子元素不需要任何操作，可以直接从父元素获取到

  • 手动继承：子元素需要自己写代码（使用inherit），从父元素继承样式

自动继承：

<style>body{font-size: 14px;font-family: unset;}.box{color:red;/* 所有的字体系子类都可以自动继承 */font-size: 20px;font-weight: 900;font-style: italic;/*增加或减少单词间的空白(即字间隔)*/word-spacing:10px;/* 文本操作 */text-align: center;/*控制文本的大小写*/text-transform: uppercase;/* word-spacing: 10px; *//* 属性增加或减少字符间的空白(字符间距)。*/letter-spacing: 10px;/* 内容在块元素内部 作用行高 行级元素 默认行高文本高度 */line-height: 50px;/* cursor：设置鼠标的样式，但是lable标签不能自动继承 */cursor:pointer ;/* css的样式自动继承：例如： */}
</style><div class="box"><p>W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。</p><span>span element</span><label for="">用户名</label>这是 div 的内容
</div>

能够被自动继承的属性有哪些：

  • 字体样式（font系列）的css样式可以被自动继承

    • font-family 字体样式

    • font-size 字体大小

    • font-weight 字体加粗

    • font-style :italic; 斜体

  • 文本样式的css样式可以被自动继承

    • text-align 文本对齐方式

    • line-height 行高

    • text-indent 首行缩进

    • word-spacing 英文字符间距

    • letter-spacing 中文字符间距

    • color 文本颜色

    • text-transform 英文大小写转换

    • list-style 列表的样式默认也会被继承

不能被自动继承的属性：

cursor: pointer 设置鼠标样式

鼠标样式 cursor，是设置鼠标的样式，默认子元素可以继承。但是label和超链接不能自动继承。

width、height。margin外边距、padding内边距 等等

手动继承：

使用inherit手动继承（直接在属性后面添加inherit即可）

     .box{border: 1px solid red;font-size: 40px;color:red;width: 800px;height: 550px;font-weight: bold;font-family: 宋体;text-align:center;text-indent:50px;word-spacing:50px;cursor: pointer;list-style:circle;}ul{/*设置手动继承，直接在属性后面添加inherit即可*/border:inherit;width: inherit;height: inherit;list-style: inherit;/* list-style-position: inside; */}

Published by

风君子

独自遨游何稽首 揭天掀地慰生平