css样式与选择器

徽州不知名博客

已于 2022-06-23 08:44:25 修改

阅读量99

点赞数 3

分类专栏： css HTML 文章标签： css 前端 html

于 2022-06-22 20:42:44 首次发布

本文链接：https://blog.csdn.net/m0_57243953/article/details/125415446

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 1 订阅

订阅专栏

css介绍

css是一个层叠样式表，网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我们能看到的只有最上边的一层

css书写位置

方式一：内联样式/行内样式

写在开始标签里，写一个style属性，在style属性值里面写样式。

格式为样式名:样式值; 可以写多组样式，以;隔开即可
<span style="color: yellow; background-color: green; font-size: 40px">大家好。</span>
      <span style="color: yellow; background-color: green; font-size: 40px">hello,html。</span>
      <span style="color: yellow; background-color: green; font-size: 40px">hello,world。</span>
该方法的缺点是：

1、结构和样式耦合

2、不容易修改

方式二：内部样式表

在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式

可以多组样式，以分号隔开
<style>
      p{
        color: red;
      }
    </style>
该方法的缺点是，不方便使用

方式三：外部样式表

在html文件外新建一个css文件，在css文件内书写样式，然后通过link标签引入css文件

引入方法为：
<link rel="stylesheet" href="./index.css" />

css语法

CSS的注释，作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

CSS的语法：选择器声明块

选择器：选中你想设置样式的内容/标签/元素，写{}

声明块：一组一组的名值对结构

css常用选择器

1、元素选择器

使用方法：选中对应的标签

语法：标签名{}
h1{
        color: red;
      }


<h1>登高</h1>
2、id选择器

使用方法：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{}
#p1{
        color: green;
      }

<p id="p1">风急天高猿啸哀，渚清沙白鸟飞回。</p>
3、class选择器

使用方法：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值{}
.p2{
        color: orange;
      }

<p class="p2">无边落木萧萧下，不尽长江滚滚来。</p>

css复合选择器

1、交集选择器

使用方法：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{}

例如：div.red{},#div2.red{}

注意：如果选择器中有元素选择器，必须把元素选择器放在前面
.red {
        color: red;
      }
      div.red {
        font-size: 24px;
      }

<p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
<div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
2、并集选择器

作用：同时选中符合多个选择器对应的内容

语法：选择器1,选择器2,选择器3····{}

例如：.red,#p2,h1{}
h1,h3 {
        color: orange;
      }

<h1>满江红·写怀</h1>
<h3>岳飞·宋</h3>

css属性选择器

属性选择器

语法：[属性名]{} 选择含有指定属性的元素

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

css伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态

比如：第一个元素，被点击的元素，鼠标移入的元素

特点：

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child()
选中第n个子元素。n为所有的，2n或even选中偶数

2n+1或odd选中奇数

以上这些伪类都是根据所有的子元素进行排序

同类型的子元素中去选择，则使用如下代码

:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第n个子元素

:not() 否定伪类

将符合条件的元素从选择器中去除

例如：
/* 需求：将ul里的第一个li一直设置为红色 */
      li:not(.l1){
        color: red;
      }

css中a元素的伪类

1、:link 用来表示未访问过的链接（正常链接）
<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="../常用标签/常用H5标签/列表.html">点击</a>
    <div>登高</div>
  </body>
a:link {
        color: red;
      }
2、:visited 用来表示访问过的链接

由于隐私的原因，所以visited只能改颜色
a:visited {
        color: green;
      }
3、:hover 用来表示鼠标移入的状态
a:hover {
        font-size: 40px;
        color: grey;
      }
div:hover{
    color: orange;
   }
4、:active 鼠标点击后的状态
div:active{
        background-color: palegreen;
      }
:link :visited只针对超链接a标签

:hover :active 针对所有的标签

css伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）

::first-letter	表示第一个字母
::first-line	表示第一行
::selection	选中的内容
::before	元素的开始位置
::after	元素的结束位置

before和after必须要结合content使用

举例：

<!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::first-letter{
          font-size: 34px;
        }
        p::first-line{
          background-color: yellow;
        }
        p::selection{
          color: red;
        }
        p::before{
          content: '你好';
        }
        p::after{
          content: '大家好';
        }
    </style>
  </head>
  <body>
    <q>hello</q>
    <p>
     走进智慧粮仓内部,满满的都是“黑科技”。
    </p>
  </body>
</html>

继承与选择器的权重

继承：

        定义：为一个元素设置的样式，同时也会应用到它的后代元素上

优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式

注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承

选择器的权重：

        !important优先级最高，其次是内联样式、id选择器、类和伪类选择器/属性选择器、元素选择器和通配符、子选择器、相邻选择器等（如*、>、+），继承的样式，没有优先级

注意：

1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

2、(并集选择器)分组选择器是单独计算的

3、如果优先级计算后相同，此时则优先使用靠下的样式

4、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器，量变达不到质变

徽州不知名博客

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式与选择器

css是一个层叠样式表，网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我们能看到的只有最上边的一层
复制链接

扫一扫

专栏目录

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

:first-of-type	第一个子元素
:last-of-type	最后一个子元素
:nth-of-type()	选中第n个子元素

css样式与选择器

css介绍

css书写位置

css语法

css常用选择器

css复合选择器

css属性选择器

css伪类选择器

css中a元素的伪类

css伪元素选择器

继承与选择器的权重

继承：

选择器的权重：

“相关推荐”对你有帮助么？