CSS编写及选择器

时间 2021-04-15

标签 css html 浏览器缓存布局字体 spa code htm 排序栏目 CSS 繁體版

原文原文链接

设置CSS样式的方式

内联样式（行内样式）css
- 在标签内经过style属性来设置元素的样式
```
<p style="color:red;font-size:60px">
    CSS设置样式
</p>
```
问题：使用内联样式，只能对一个标签生效html

复用程度不高，维护起来比较麻烦浏览器
内部样式表缓存
- 将样式编写到head标签中的style标签里，而后经过css选择器选中元素，并为其设置各类样式。
```
<style>
    p{  /*标签选择器*/
        color:green;
        font-size:50px;
    }
</style>
```
好处：可同时为多个标签设置样式，更加方便对样式进行复用布局

问题：内部样式表只能对一个网页起做用，不能跨页面复用字体
外部样式表(最佳实现)spa
- 能够将css样式编写到外部的css文件中code
  
  而后经过link标签来引入到对应的网页中htm
```
<head> 
<link rel="stylesheet" href="./style.css">
  </head>
```
好处：样式能够在不一样页面之间进行复用排序

可使用到浏览器的缓存机制，加快网页的加载速度，提升用户体验。

CSS基本语法

css中的注释

<style>
/*
   注释内容 
    */
</style>

声明块

声明块：经过声明块来指定为元素设置的样式，是一个名值对 ---名和值之间以 : 链接，以 ; 结尾

选择器

定义：经过选择器能够选中页面中的指定元素

经常使用选择器

元素选择器
- 做用：根据标签名选中指定的元素
- 语法：标签名{ }
- 例：p{ } 、div{ } 、h1{ }
id选择器
- 做用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 例 #box{ }、#red{ }
类选择器
- 做用：根据元素的class属性值选中一组元素
- 语法： .class属性值{ }
- 例 .box{ } 、.bottom{ }
- 补充：class是一个标签的属性，和id相似，不一样的是class能够重复使用,能够为同个元素指定多个class属性
适配选择器
- 做用：选中页面中的全部元素
- 语法：*{ }

复合选择器

交集选择器
- 做用：选中同时符合多个条件的元素
- 语法：选择器1选择器2选择器3...n { }
  
  选择器之间没有空格
```
p.box.num{
             color: blue;
             font-size: 50px;   
         }
```
- 注：交集选择器中若是有元素选择器，必须使用元素选择器开头
并集选择器
- 做用：同时选择多个选择器对应的元素
- 语法：选择器1，选择器2，选择器3...选择器n{ }
- 例 #box,p,h1,div,span{}

关系选择器

相关概念
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素
  
  一个元素的父元素也是他的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素
  
  子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素

子元素选择器
- 做用：选中指定父元素的指定子元素
- 语法:父元素>子元素
后代元素选择器
- 做用：选中选中指定元素内的指定后代元素
- 语法：祖先后代
兄弟选择器
- 做用 ①：选择下一个兄弟
- 语法：前一个+后一个
- 做用 ②：选择下边全部的兄弟
- 语法：兄~弟

属性选择器

语法：[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素

伪类选择器

伪类（不存在的类，特殊的类）
- 说明：描述一个元素的特殊状态
- 通常使用：开头
- :first-child 第一个子元素
  
  :last-child 最后一个子元素
  
  :nth-child(n) 选中第n个子元素
  
  特殊值：n 第n个 n的范围0~正无穷
  
  even/2n选中偶数位的元素
  
  odd/2n+1 选中奇数位的元素
- :first-of-type
  
  :last-of-type
  
  :nth-of-type()
  
  这几个伪类功能与上面的相似，不一样点是他们是在同类型元素中进行排序
- : not() 否认伪类，将符合条件的元素从选择器中去除

a标签特有的伪类

:link 用来表示没访问过的连接(正常的连接)
：visited 表示访问过的连接（因为隐私缘由，visited这个伪类只能修改连接的颜色
：hover 表示鼠标移入的状态
：active用来表示鼠标点击

伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用：：开头

：：first-letter 表示第一个字母、
：：first-line 表示第一行
：：selection 表示选中的内容

：：before 元素的开始

：：after 元素的最后必须结合content属性来使用

<style>
p::before{
         content:"【";
         color: saddlebrown;
     }
  p::after{
         content:"】";
     }
</style>

选择器的权重及样式继承

样式的继承

咱们为一个元素设置样式同时也会应用到它的后代元素上，发生在祖先元素和后代元素之间

注：并非全部的样式都会被继承，好比背景相关的布局

选择器的权重

样式冲突：经过不一样的选择器选中相同的元素，而且为相同的样式设置不一样的值时

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配符选择器 0,0,0,0

继承的样式没有优先级

优先级计算相同，此时优先使用靠下的样式
比较优先级时，需将全部的选择器的优先级相加，最后优先级越高，则越优先显示
分组选择器单独计算
选择器的累加不会超过其最大的数量级（类选择器再高也不会超过id选择器）

注：能够在某一个样式后添加！important 则此样式会得到最高的优先级，甚至超过内联样式（通常不会使用）

相关文章

相关标签/搜索

Pipelines选择器

CSS选择器Level-4

CSS选择器世界

浏览器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<