CSS常用-----选择器及样式

最新推荐文章于 2022-05-21 18:34:12 发布

志字辈小蚂蚁

最新推荐文章于 2022-05-21 18:34:12 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/zzg19950824/article/details/78024266

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

本文介绍了CSS的基本概念，包括层叠样式表的特点、选择器的种类及其使用方式，并详细阐述了如何将CSS应用于网页中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章仅仅只是对CSS的一个汇总，方便查询使用

1. 什么是CSS？

    CSS 指层叠样式表 (Cascading Style Sheets)，他的作用是为了显示HTML元素，优点在于让定义样式更加简单，让网页的内容和表现分离，使多个样式可以层叠使用。

CSS的使用格式是选择器+声明
Selector{Declaration;Declaration}
P{
    font-family:"楷体";
}

在这里临时插入CSS的三个特点：

1.继承

1.当给父元素设置一些属性，子元素（所有后代）也可以使用
（这里注意，

color/font/text/line开头的属性才可以继承
a标签中的文字颜色和下划线不可继承
h标签的文字大小不能继承

）

2.层叠

层叠是指当有多个选择器给同一个标签设置了相同属性的时候，会选择优先权高的

3.优先级

优先级是针对多选一时的解决方案，多选择器对同一标签同一属性进行选择时的解决。
即针对于层叠。

判断方式	解释
继承	谁最近听谁的
同类型选择器直接选中	谁在后面听谁的
不同类型选择器直接选中	按照选择器优先级：id>类>标签>通配符>继承>浏览器

(小知识：我们可以在属性后面，分号前面使用！important来提升某个属性的优先级到最大，important只可以对直接选中有效)

例如：
{color:red !important;}

2. CSS选择器

1. id选择器

    根据指定的ID找到对应的标签，然后设置样式

        #id{
        属性：值;
        }
        //注意点：
        //1.同一个界面，id不可重复
        //2.注意#号
        //3.id不可是数字，不可使HTML标签，只可是数字，字母，下划线
        //4.id一般给JS使用

2. class选择器

    根据指定的类名找到对应的标签

        .类名{
        属性:值;
        }
        //注意点：
        //1.每个标签都可设置类名
        //2.类名可重复
        //3.注意加上点
        //4.注意命名规范，和id一样
        //5.类名是专门针对css的
        //6.每个标签可以有多个类名，中间用空格分开

    什么是类，类就是带有类似样式的标签，所以要学会抽取公共类，将一个类绑定给标签，类似于先想好类，再赋予标签，这更符合样式与代码分离，更加简单高效。

    而id呢，就是先有标签，然后专门为其赋予样式

3. 标签选择器

根据指定标签的名称，在当前页面查找所有该名称的标签，然后设置属性

    标签名称{
    属性：值;
    }
    //注意点：
    //1.标签选择器选中的是所有标签
    //2.无论标签多深都能选中
    //3.任何HTML标签均可以

4.其他选择方式

    下面以表格列举其他的选择方式，其实就是一种组合

名称	格式	作用
后代选择器	标签1 标签2{属性：值;}	特点是
		1.中间使用空格，会查询后面所有的
		2.可以用空格一直延续下去
		3.后代选择器理解为在什么下面查找某个选择器，所以后面的可以是标签选择器，也可以是其他选择器
子元素选择器	标签1>标签2{属性：值；}	特点是：
		1.只会查找儿子，不会查找其他，即下一个
		2.后面可以是其他选择器
		3.可以使用>一直延续
交集选择器	选择器1选择器2{属性：值；}	相交的标签，可以是3种选择器任何一种
并集选择器	选择器1，选择器2{属性：值；}	多个选择器选择的标签同时设置，相当于两个选择器选中的都设置
相邻兄弟选择器	选择器1+选择器2{}	后面紧跟的那个
通用兄弟选择器	选择器1~选择器1{}	后面所有的
序选择器：同级别第几个	选择器：first/:last/:nth/:nth-last/:only-child{}	同级别第一，最后，第几个,倒数第几个,父元素中唯一的那个
序选择器：同级别同类型第几个	选择器：first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type/:only-child-of-type{}	同级别同类型第一，同类型最后，同类型第几个,同类型倒数第几个,同类型父元素中唯一的那个
序其他	odd/even/xn+y	奇数标签/偶数标签/公式
属性选择器	选择器 [属性]{}	通过选择器+属性，所有带某个属性的元素，例如img[alt]{},所有带alt属性的img元素
	选择器[属性][属性]{}	所有带有两个属性的元素
	选择器[属性=值]{}	属性等于某个值的元素
	选择器[属性^=值]{}	属性的取值以value开头的元素
	选择器[属性^=值]{}	属性的取值以value开头的元素
	选择器[属性*=值]{}	属性的取值包含value的元素
通配选择器	*{}	所有标签

子元素选择器和兄弟选择器的区别在于：前者是里面的，后者是后面的

3. CSS的使用

    CSS的使用可以理解为怎样把CSS样式放入网页中
        CSS插入样式表的方式主要有三种

1. 外部样式表（External style sheet）

外部的嘛，就是与我们的HTML文件想分离，然后再在HTML页面中导入的一种方式，优点在于可以实现了真正的分离，可以在多个页面中使用听一个样式表

<head>
    <link rel=”stylesheet” type=”text/css” href=”acss.css”>
</head>

2. 内部样式表（Internal style sheet）

内部，顾名思义，就是将我们的CSS样式定义在HTML文件中

<head>
    <style>
        h{
        color：red;
    }
    </style>
</head>

3. 内联样式（Inline style）

    内联样式可以理解为一个临时的只针对某一个的样式表

<p style=”color:red;font-size:20px;”></P>

//注意，内联样式没有大括号

这里有一点可以提一下：

当拥有多个样式来源时，优先级时这样的：
内联样式>内部样式>外部样式>浏览器样式

怎么理解呢？
比如一个P标签，当内部样式定义了两个

    text-align:left; font-size:10pt;

而外部样式定义了三个：

    color:red; text-align:right; font-size:18pt;

那么P标签采用的就会是：

    color:red;text-align:left;font-size:10pt;

意味着相同的样式定义优先选用了优先级打的，而没有的照搬了下来。

总结：

今天就先将这些列举出来，有时间再整理后面的