html <div id="wrapper">是什么意思?

html-css010

html <div id="wrapper">是什么意思?,第1张

HTML中<div id="wrapper">的意思是:定义一节或者一部分区域,它的css样式对应的css中id选择器的wrapper(注意:wrapper不是一个标签或者关键字,是编程者自定义的一个字符)

补充:

HTML中<div>可定义文档中的分区或节。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

id是css中选择器的一种,他的作用是引用css中定义的某种样式给某个标签。

例如:

<html>

<body>

<div id="test">//test是任意定义的一个字符,只要和下面对应即可

  <h3>This is a header</h3>

  <p>This is a paragraph.</p>

</div>

<style>

#test{color:red}// 这里是css样式

</style>

<body>

</html>

效果如下:

CSS优先级是根据等级的值相加得出选择器的权重来决定的。

!important >行内样式 >ID >类、伪类、属性 >标签名 >继承 >通配符

计算权重方式:

从图上看讲权重分为:

1. 第一等:代表内联样式,如: style=””,权值为1000。

2. 第二等:代表ID选择器,如:#content,权值为0100。

3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

当权重一样时遵循准则:

1. 选择器越 具体 优先级越 高

2. 在同一个级别的情况下, 最后 指定的规则优先级就越 高 ,也就是我们通常说的就近原则;

权重计算例子:

1. li  ->0 0 0 1 权重为 1

2. h1 + *[rel=up] ->0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10,因此权重为11

3. ul ol li.red ->0 0 1 3 权重为13

4 li.red.level ->0 0 2 1 权重21

1. !important  (width: 100% !important)

2. 行内样式   (style="width:100%")

3. id选择器  (#myIdName)

4. class选择器  (.myClassName)

5. 标签选择器  (div,h1,p)

1. 使用 " >>>" 符号,这种方式主要是用于普通css,方式为:

  外层 >>>第三方组件样式: .wrapper >>>.swiper-pagination { color: #eee  }

2. 使用 "/deep/" ,这种方式主要用于sass或less,方式为:

外层 /deep/ 第三方组件样式: .wrapper /deep/ .swiper-pagination { color: #eee  }