CSS选择器

最新推荐文章于 2022-03-21 17:31:59 发布
最新推荐文章于 2022-03-21 17:31:59 发布
阅读量232 收藏
点赞数 1
分类专栏： Web前端 HTML+ CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FL_csdn1/article/details/113382085
版权

目录

基础选择器

选择器名称选择符号权重
标签选择器标签名称即可1
id选择器#100
类选择器.10
通配符选择器*0

注意：id选择器的名称在声明时不能重复，是唯一的，而类选择器声明时的名称可以重复

CSS3高级选择器

伪类选择器

a:link（未访问过的链接）
a:hover（鼠标经过，也就是鼠标指针放在该元素上时）
a:active（当前激活链接,也就是点击鼠标左键时）
a:visited（已访问过）
权重为10

属性选择器

在这里插入图片描述
权重为10

结构伪类选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

伪元素选择器

在这里插入图片描述

在这里插入图片描述

CSS3的内容来源与黑马pink老师的笔记

FL_csdn1
关注
专栏目录
python元组添加元素_Python 列表，for循环，元组的使用(修改、添加、删除、排序、切片)...
weixin_39940913的博客
11-24 1万+
Python 列表(List)Python的基本数据类型有整数，浮点数，布尔，字符串，它们是最基本的数据。在实际编程中，我们要经常组织由很多基本数据组成的集合，这些集合的不同组织方式就是：数据结构，今天讲的是数据结构中的Python list(列表)。数据结构就是一些数据组合得到的“复合”数据类型。Python内置的数据结构有：列表(list)元组(tuple)字典(dict)集合(set)在Py...
Flex 弹性盒子布局(容器、项目)
Dwyane、的博客
06-15 865
一：简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二：容器的属性 1.flex-direction 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 .
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
前端设计之css理解浮动
weixin_44713462的博客
04-30 205
看到这莫详细的分析，学到了很多。 一、浮动介绍 历史： 浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。 定位方式： 浮动让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。 Note: 1、碰到容器的边指的是容器的padding内边。 举...
CSS 之 Flex布局
qq_33934427的博客
01-06 3万+
CSS 之 Flex布局 文章目录CSS 之 Flex布局1、Flex布局 vs 网格布局 （1D vs 2D）2、Flex属性1）flex-direction属性 & 排列方向2）flex控制横纵轴 & 排列顺序（单/双项目）a）理解justify-content & align-itemsb）理解justify-content ：space-betweenc）for循环排列卡片3、Flex响应式布局 1、Flex布局 vs 网格布局 （1D vs 2D） 个人理解：Flex是一维
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
react-React组件的css选择器
08-15
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
CSS初入门：flex布局
lalala_dxf的博客
03-21 7038
flex布局 简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。任何一个容器都可以指定为 Flex 布局。 关于flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex con
CSS的flelx布局朋友圈总结
醉月听风的博客
09-11 439
首栏固定 1.首栏固定后会出现首栏脱离当前位置上浮在其他DIV上方，可设置被遮挡元素的smargin-top属性下移布局 flex布局： display：flex； 1.flex布局常用属性： flex-direction：属性决定主轴的方向 row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在顶部 ...
什么是css选择器？css3中5种常见的基本选择器-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-03 2145
本章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一：什么是css选择器？ CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。 二：css3中5种常见的基本
CSS（三）flex布局（flex弹性布局详解）
前端产品工程师
08-11 1万+
这是一个系列的文章，你也可以查看其他文章： 0、CSS-预热篇 1、CSS（一）详解position 2、CSS（二）transform 3、CSS（三）flex布局（flex弹性布局详解） 4、CSS（四）详解Grid布局 5、CSS（五）CSS动画-transition简介 6、CSS（六）CSS动画-animation简介 7、CSS(七)两栏布局详解 早期CSS三大难题包...
css中的flex（弹性）布局
domunweb的博客
07-08 3万+
flex 弹性布局 一. flex 解释 1、flex 布局 为 flexible BOX 的缩写 ，意思为 弹性布局。 2、块级元素和行内块级元素都可以使用flex布局 3、Webkit内核的浏览器，需要加上-webkit前缀。 二. flex 容器 属性 1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平...
一些有用的CSS样式
谢谢你,慌乱了我的年华
06-19 580
/*1. 垂直对齐容器中的元素*/.verticalcenter{    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -o-transform: translateY(-50%);    transform: translateY(-50%);}/*2基于文件格式使用不同的样式*/a[hre...
CSS样式的基础学习
邢金聪 廊坊师范学院九期信息技术提高班
09-30 1837
一．CSS基本介绍 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定
css flxbox 布局调试页面
qq_36354963的博客
05-13 302
css flxbox 布局调试页面 flex 布局调试 https://changk99.github.io/flexbox/
清除浮动的四种方式及其原理
FL_csdn1的博客
02-01 1万+
目录一、为什么要清除浮动二、清除浮动的第一种方式---给父级盒子添加高度三、清除浮动的第二种方式---额外标签法四、清除浮动的第三种方式---给父级添加 overflow 属性五、清除浮动的第四种方式---给父级添加after伪元素 一、为什么要清除浮动 在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。 什么是高度塌陷呢，我们用一个小小的案例来了解一下，请看下面代码。 <!DOCT
什么是前端开发工程师
FL_csdn1的博客
01-25 6963
      鄙人是一名计算机软件专业的学生，刚进入到这个邻域可谓是前途一片迷茫，加之自己的学习方法有问题，导致所学基础知识极其不扎实，在之后的学习上碰到非常多的困难，甚至一度想过放弃，所以在学一门技术之前一定要了解这门技术它是干什么的，它是怎么来的，最重要的还是它的底层原理的实现。       在这里我想引用一下哲学中的三个终极问题：“它是谁，它从哪里来，要到哪里去”，只不过我把“你”改成了“它”，这里的这个
CSS选择器类型及其作用详解
CSS选择器不仅限于单独使用，它们可以组合、嵌套使用，也可以通过逗号分隔来选择多个元素，大大提高了样式的灵活性和控制力。理解和掌握不同类型的选择器是前端开发者进行网页设计与开发的基础技能之一。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值