CSS 选择器傻傻分不清 , 看这些就够了!

最新推荐文章于 2024-05-09 13:14:11 发布

zzzzls~

最新推荐文章于 2024-05-09 13:14:11 发布

阅读量380

点赞数

分类专栏： html & css 文章标签： css html 层叠样式表 css选择器

本文链接：https://blog.csdn.net/qq_36078992/article/details/106085869

版权

html & css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

CSS

CSS 是 “Cascading Style Sheet” 的缩写，中文译为 “层叠样式表”，用来控制网页的样式，如字体，颜色，边框，间距，大小，位置，可见性等

如果将 HTML 网页比作 “毛坯房”，那么有了 CSS 就是 “精装修”！

CSS 诞生

HTML 标签原本被设计为用于定义文档内容，通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达 这是标题，这是段落，这是表格 之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签

此时两种主要的浏览器 ( Netscape 和 Internet Explorer ) 不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难

为了解决这个问题，万维网联盟（W3C），这个非盈利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创建出样式（Style）

所有的主流浏览器均支持层叠样式表

CSS 语法

CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明（每条声明由一个属性和一个值组成）

选择器通常是需要改变样式的 HTML 元素
属性（ property ）是您希望设置的样式属性，每个属性有一个值，属性和值用冒号分开
多条声明之间使用 ; 隔开

在这里插入图片描述

HTML 嵌入 CSS 样式

引入方式的优先级： 就近原则

行内样式

行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的 style 属性中，最直接的一种方式，但是修改起来较为麻烦

<p style="font-size:30px;">行内样式</p>

内嵌式

内嵌式通过将 CSS 写在网页源文件的头部，即在 <head> 和 </head> 之间，通过使用 HTML 标签中的 <style> 标签将其包围，解决了行内样式多次书写的弊端

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p>内嵌样式</p>
</body>
</html>

链接式

链接式通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中，这也是网站使用最多的方式。这种方法将 HTML 和 CSS 完全分离，增强网页结构的扩展性和 CSS样式的可维护性

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>链接样式</p>
</body>
</html>

@import导入

@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");

CSS 选择器

元素选择器

元素选择器，最常见的 CSS 选择器，匹配文档树中该元素类型的每一个实例

/* 单个元素选择器 */
div {
    background-color: pink;
}

/* 多个元素选择器 */
h1, p {
    color: gray;
}

id 选择器

通过元素的 id 属性定位元素，影响范围最小
选择符 #

#item{
    width: 200px;
    height: 200px;
}

class 选择器

通过元素的 class 属性定位元素
选择符 .

.box{
    width: 200px;
    height: 200px;
}

属性选择器

根据元素的属性及属性值来选择元素

/* 对包含 title 属性的元素生效 */
*[title] {color:red;}

/* 对包含 title，href 属性的 a 标签生效  */
a[href][title] {color:red;}

后代选择器

又称为包含选择器，对指定元素中的某一元素生效，递归查询符合子元素，全部生效

h1 em {
    color:red;
}

查询 h1 标签中的 em 元素，不论嵌套多少层都会生效

子代选择器

仅对父元素下一级中符合的子元素生效

h1>em {
    color:red;
}

查询 h1 标签中的 em 元素，仅查询一级

兄弟选择器

兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

在这里插入图片描述

伪类选择器

选择器	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式

/* 当鼠标悬停在 a 标签时生效 */
a:hover {
    color: red;
}

伪元素选择器

用于向某些选择器设置特殊效果

选择器	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

/* 每个 <h1> 元素后面插入一句话 */
h1:after
  {
  content: "--zzzzls";
  }

选择器优先级

例如同时两个选择器给同一个元素设置相同的属性，那么最终设置为哪个呢？这就要按照优先级来了

内连样式 优先级 1000
id 选择器 优先级 100
class 选择器 优先级 10
元素选择器优先级 1
统配选择器优先级 0
继承的样式优先级没有

以上的优先级先满足高的。

注意：

如果是两种相同优先级为同一个元素同一个属性设置的话，是哪个写在代码靠后最终就按那个的样式
交集选择器的优先级所有优先级加起来运算然后比较
并集的话就是各算各的

zzzzls~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 选择器傻傻分不清 , 看这些就够了!

CSS 是 "`Cascading Style Sheet`" 的缩写，中文译为 "**层叠样式表**"，用来控制网页的样式，如字体，颜色，边框，间距，大小，位置，可见性等如果将 HTML 网页比作 "毛坯房"，那么有了 CSS 就是 "精装修"！
复制链接

扫一扫