前端基础2：CSS作用及CSS选择器

最新推荐文章于 2024-07-14 16:43:41 发布

weixin_34110749

最新推荐文章于 2024-07-14 16:43:41 发布

阅读量105

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b8533a9e51d45578c452c5a

版权

HTML元素

lang="en" 语言
meta 元信息 ##CSS 样式层层叠样式表 Cascading style sheet
第一点：CSS有什么作用
第二点：CSS怎么和HTML关联
第三点：用CSS如何选取到HTML标签（CSS选择器）

CSS作用：美化HTML结构

CSS如何与HTML关联

（CSS引入方式）

四种引入方式：（面试题）

行内式
- 作为标签属性引入样式
- 权重：1000
```
<div style="color: red; font-size: 30px">div标签</div>
复制代码
```
- "color: red; font-size: 30px"属性值
- color：CSS属性名 -red：CSS属性值
- 内嵌式
  - 将CSS代码写在style元素内，通过css选择器来选择html元素将css样式添加给这个元素
```
<style>
div,p {
color: red;
}
</style>
复制代码
```
外链式
- 将CSS代码单独放在CSS文件中，再通过link标签将CSS文件引入html页面中,link放在head中
```
<link rel="stylesheet" href="style.css">
复制代码
```
- link：标签名
- rel：属性名
- stylesheet：属性值样式表（必须写）
- href：链接属性
- type=“text/css” 告诉浏览器是css文件

导入式

@import"url";都是引入一个单独的css文件

    <style>
    @import "style.css";
</style>
复制代码

工作中最常用外链式，偶尔用内嵌式。

外链式和导入式的区别（面试题）

外链式和导入式的区别，外链式用link标签引入，导入式用@import引入 - 放置的位置差异：外链式直接在我们的head标签里去写，导入式需要放到style标签里或者样式文件中 - 加载顺序不同：外链式和html等页面同时加载出来，导入式需要等页面全部加载完才可以被加载进来。

CSS选择器

基本选择器

元素选择器（标签选择器）
- 直接把标签当作选择器使用
- 权重：1
```
div{color:red; font-size:30px;}
<div>div标签</div>
复制代码
```
ID选择器
- 将HTML元素的id属性值，当作选择器使用，需要在这个标签的属性值前加#
- id选择器可以为标有特定id的html元素制定特点的样式。
- id具有唯一性
- id选择器和js配合使用
- 权重100
```
    <style>
    #div1{
        color: brown;
    }
</style>
<body>
<div id="div1">div标签</div>
</body>
复制代码
```
class 选择器
- 将html元素的class标签属性值，当做选择器使用，需要在这个标签属性值前面加”.”
- 权重：10
- 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用一个html元素可以有很多个标签属性值（类名），类名与类名间用空格隔开
- 类名可以重复使用（复用）
- 一个html元素可以同时又多个clss值，用空格隔开
```
    <style>
    .div1{
        color: aqua;
        background: greenyellow;
    }
</style>
<body>
<div class="div1">div标签</div>
<p class="div1">p标签</p>
</body>
复制代码
```
通配符选择器“*”
- 匹配全部的html元素
- 一般不使用
- 权重0-1

关系选择器

后代选择器
- 语法：E F G（中间用空格隔开）
- 选择所有包含在E元素里面的F元素
- 权重基本选择器相加之
```
        ul img{
        width: 80px;
        height: 80px;
        background: darkcyan;
    }
    ```
复制代码
```
子集选择器
- 语法：E>F 选择所有作为E元素的子元素F
- 权重所有选择器相加之和
- 父级选择器用来确定取值范围
- 子集选择器才是我们要添加样式的元素
- 子集选择器必须是紧邻的父子关系
- 子集选择器只能选中子元素，而不能选中孙辈，而后代选择器将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子
```
    <style>
    ul>li{
        color: rosybrown;
        font-size: 90px;
        background: chartreuse;
    }
    li>span{
        color: thistle;
    }
</style>
复制代码
```
相邻选择器
- 语法：E+F
- 选择紧贴在E元素之后的F元素
- 权重所有选择器相加之和
```
    <style>
    h3+span{
        color: thistle;
    }
</style>
复制代码
```

兄弟选择器

语法：E~F
选择E元素后面的所有F元素

    <style>
    h3~span{
        color: thistle;
    }
</style>
复制代码

交集选择器
- 语法：E.className
- 两种选择器同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择
- 权重：所有组合选择器权重之和
- 作用：准确查找html元素，增加html元素权重交集选择器是由两个选择器组合到一起：标签选择器和类选择器组合是常用的标签选择器和类选择器组合的时候，要把标签选择器放到前面
  交集选择器中间没有任何符号或者空格
```
 <style>
    div.div1{
        color: navy;
        font-size: 60px;
    }
</style>
复制代码
```
并集选择器
- 语法：E,F,G{CSS样式}选择所有E元素F元素和G元素
- 作用：同一份css样式，可以一次性的添加给多个不同的html元素
- 权重：分组选择器将不同的html分为一组，计算权重的时候是独立计算的，不会叠加
```
    <style>
    div,span{
        color: hotpink;
    }
</style>
复制代码
```

属性选择器

语法 [属性名=属性值]{}
权重 10

       <style>
        /*[title="skr"]{*/
            /*color: navy;*/
            /*background: yellow;*/
        /*}*/
        [class="div1"]{
            background: violet;
        }
    </style>
复制代码

伪类选择器

一个元素为某种状态时，例如鼠标划过、鼠标点击时的状态
E:link 设置超链接a的默认样式，未被访问前的样式
E:hover 设置元素在鼠标悬停时的样式常用权重：10
E:visited 设置超链接被访问过时的样式
E:active 设置元素被激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus 设置元素获取焦点时的样式（一般用于表单元素）
E:checked 设置选中状态的E元素。（用于input type为radio与checkbox）
E:enabled 可用状态的E元素。（一般用于表单元素）
E:disabled 选择每一个处于禁用状态的E元素（一般用于表单元素）
E:firstchild 匹配父元素的第一个子元素E
E:lastchild 匹配父元素的最后一个子元素E
E:nth(n)匹配父元素的第n个子元素E
E:nthlastchild(n)匹配父元素的倒数第n个子元素E

转载于:https://juejin.im/post/5b8533a9e51d45578c452c5a

weixin_34110749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础2：CSS作用及CSS选择器

HTML元素lang="en" 语言meta 元信息##CSS样式层层叠样式表Cascading style sheet第一点：CSS有什么作用第二点：CSS怎么和HTML关联第三点：用CSS如何选取到HTML标签（CSS选择器）CSS作用：美化HTML结构CSS如何与HTML关联（CSS引入方式）四种引入方式：（面试题）行内式作为标签属性引入样式权重：1...
复制链接

扫一扫