前端学习总结Day2

文章目录

• 一、行内样式和CSS
• 二、CSS基本选择器及关系选择器
• 三、选择器优先级

一、行内样式和CSS

style标签是个特殊标签，它的标签内容是css样式表。

CSS简介：

CSS是层叠样式表，是描述标记语言页面格式的标准/语言。CSS使开发人员能够分离内容和可试化元素，实现更好的页面和灵活性。可以对页面内容进行美化/样式的添加。

CSS使用方法：

1.内联样式（行内/行间样式）

<p style="color: pink">始标签内添加style属性并设置css样式</p>

2.内嵌样式（内部样式），在html中head标签中添加并且按照固定格式设置css样式。

<style>
        /* 
        选择器：本条样式表针对页面中的哪些标签生效。
        */
        p {
        font-size: 30px;
        color: pink;
      }
    </style>p

 3.外联样式（外部样式），在外部创建一个css文件，在html中head标签中通过link引入css文件。

<link rel="stylesheet" href="./mystyle.css" />

样式优先级: 

行内样式>内部样式/外部样式（按照在头标签里面的先后顺序，以浏览器的执行顺序判断优先级）。

---

二、CSS基本选择器及关系选择器

1.通配符选择器，选择页面中所有的标签。

 * {
        font-size: 30px;
      }

 2.标签名选择器，例：选择页面中所有标签名为p的标签。

p {
        color: red;
      }

3.id选择器，例：选中页面中id值为first的元素。格式：#id值。

标签的id属性，是这是标签在本页面中唯一的标识符，所以页面中不应该有两个元素的id值相同

#first {
        background-color: pink;
      }

4. class选择器，例:选中页面中包含line的元素。格式：.class名。

.line {
        font-size: 60px;
      }

class和id选择器的区别：

             1.前缀不同，在css中class选择器以“.”前缀，而id选择器以“#”为前缀。

             2.class类可以添加多个类名，中间以空格隔开。id名只能有一个。

             3.id的优先级：给同一元素同时使用class类名设置相同的css样式，优先执行id选择器内的css养样式。

             4.id的唯一性：在js中的一整个页面中一个id只能出现一次。

5. 交集选择器，例：选择页面中id为first并且class值包含line的p元素。

p#first.line {
        color: black;
      }

6. 并集选择器（兄弟选择器），例：可以同时选择多个标签，设置相同的样式。

p,
#box {
        background-color: yellow;
      }

 7.子选择器，在嵌套中通过外层元素一层一层的找到某个后代元素。必须是父元素指向子元素且一层一层。

#box > div > h4 {
        color: aqua;
      }

8. 后代选择器，在嵌套中通过外层元素直接找到。格式：祖先元素（空格）后代元素。

#box span {
        color: red;
      }

 9.相邻关系选择器，格式：兄弟+相邻兄弟，例：选择的是页面中紧接着p元素之后的第一个div元素。

div p + div {
        background-color: green;
      }

 10.兄弟选择器，格式：兄弟~兄弟，例：设置同一个div元素之后的每一个ul元素的背景颜色。

div p ~ ul {
        background-color: pink;
      }

---

三、 选择器优先级

如果优先级相同，采用就近原则，选择最后出现的样式。

• ID 选择器， 如 #id{}

• 类选择器， 如 .class{}

• 属性选择器， 如 a[href="segmentfault.com"]{}

• 伪类选择器， 如 :hover{}

• 伪元素选择器， 如 ::before{}

• 标签选择器， 如 span{}

• 通配选择器， 如 *{}

选择器	权重	权重的等级
！important	无穷大	0
style 属性	1,0,0,0	1
id 选择器	0,1,0,0	2
类、伪类、结构伪类、属性选择器	0,0,1,0	3
标签、伪元素选择器	0,0,0,1	4
通配符选择器	0,0,0,0	5
继承的样式	没有权重	6

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器>统配符选择器

如果有!important则优先级最高，继承样式没有优先级。

权重计算

• 后代选择器、子选择器、兄弟选择器、交集选择器：所有的基础选择器的权重相加（忽略掉 “>” 和 “+” ），注意没有进位。
• 并集选择器：相当于多个选择器一起设置样式，权重分开计算即可。
• 伪类：a:hover、p:first-child 的权重是0,0,1,1 不是 0,0,1,0；a:nth-of-type(n):hover权重是 0,0,2,1;即要加上前面那个元素的权重。
• 属性选择器：p[class~=“hello”] 的权重是 0,0,1,1（也是要加上前面那个元素的权重）。

---