大家好，我是半夏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CssBase</title> <link rel="stylesheet" href="lesson.css" type="text/css"> <
结构伪类选择器 什么是结构伪类选择器？ 什么是伪类选择器？ CSS中已经定义好的选择器,不能随便取名 什么是结构伪类选择器？ 针对HTML层级结构的的伪类选择器 应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
选择器是由 CSS 最先引入的一个机制（但随着 document.querySelector 等 API 的加入，选择器已经不仅仅是 CSS 的一部分了）。 选择器的基本意义是：根据一些特征，选中元素树上的一批元素。 我们把选择器的结构分一下类，那么由简单到复杂可以分成以下几种。 简单选择器：针对某一
结构伪类选择器 伪类：在选择器后面加上一些条件 形式： 标签名: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*ul li标签的第一个子元素修改样式*/ ul li:first-ch
css 1.初识css 首先打开百度首页，右键点击审查元素 1.1CSS是什么 cascading style sheet 层叠样式表 美化网页 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动等 跳转 1.2css发展史 css1.0 css2.0 div+css ，html和网页分离的思想 css2.1 浮动+定位 css3.0 圆角，阴影
伪类和伪元素的区别 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。 伪类用于当已有的元素处于某个状态时，为其添加
::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用 单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素（伪元素由双冒号和伪元素名称组成），为了兼容已有的伪元素写法，在一些浏览器中也可以使用单冒号，来表示伪元素，比如:first-line、:first-letter、:before、:after等。 在
伪类 用于已有元素 处于某种状态时 为其添加对应的样式。 这个状态时根据用户行为而动态变化的。 举例： :hover ：鼠标悬浮时样式 h1:hover{ color: #42b983; } 伪元素 用于创建一些不在DOM树中的元素，并为其添加样式。 注意：虽然在页面上可以看的见对应的元素，但实际上用伪元素创
/* 伪类选择器： 1、链接的伪类 2、普通元素的伪类 :hover 3、表单的伪类 input:focus{} */ /* lvha */ a:link{color:hotpink;} /* 未被点击过的 */ a:visited{color:blue;} /* 点击过的 */ a:hover{color: red;} /* 鼠标移入时 */
前言 熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。 伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对
之前我们提到过选择器由基础选择器与复合选择器构成，现在我们说一下复合选择器 复合选择器是将两个或更多个基础选择器复合到一起，这样选择起来更方便，复合选择器包含后代选择器，子选择器，并集选择器，伪类选择器等，常用的就是我们提到的这四个 目录 1 后代选择器 2 子选择器 3
选择器 CSS2.1中，选择器7种： id选择器 #box 类选择器 .red 标签选择器 p 后代 div p 交集 div.red 并集 div,p 通配符 * 关系选择符 > 儿子，亲儿子，不是后代，必须是儿子 + next sibling，下一个兄弟 ~ next all siblings ，下所有兄弟 不要加空格，因为CSS中的空格有后代的意
布局 元素居中对齐 水平居中对齐一个元素（如<div>），可以使用margin：auto. 注：若未设置width属性，或设置width=100%，居中对齐将不起作用。 文本居中对齐 使用text-align:center; 图片居中对齐 使用margin:auto;并将它放到块元素中。 左右对齐 使用position:absolute时; 提示：当使用positi
:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或该元素的后代元素获得焦点。
伪类：条件 /*ul的第一个子元素*/ ul li:first-child{ background: green; } /*ul的最后一个子元素*/ ul li:last-child{ background: seagreen; } /*选中p1：定位到父元素，选择当前的第一个元素
伪元素：伪元素主要是用来创建一些不存在于原有dom结构树中的元素。 例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使
<!--css--> .border { background: #099; width: 60px; height: 30px; position: absolute; right: 0; } .border::after { position: absolute; content: ""; top: 30px; right: 0; border-bottom: 10px
CSS复合选择器和元素显示模式 1.CSS复合选择器 1.1 什么是复合选择器 所谓的复合选择器就是站在基础选择器的基础上，对基础选择器进行组合形成的，一般来说复合选择器是由两个或者多个基础选择器组合而成的。常用的复合选择器包含：后代选择器，子选择器，并集选择器，伪类选择器等等。
<style> /*默认的颜色*/ a{ text-decoration: none; color: #b1be7d; } /*鼠标悬浮的状态（只需要记住hover）*/ a.hover{ color: #be3bbd; font-size: 50px; } /*鼠标按住未释放
<style> /*ul的一个元素*/ ul li:first-child{ background: #3dbe4b; } /*ul的最后一个元素*/ ul li:last-child{ background: #2d4ebe; }</style>
好久不见，甚是想念！ 大家好！ 我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS选择器，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨 点赞、收藏、关注支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍CSS元素样式，到时不见不散~~~
这个也有意思 之前几天学的，现在写写刚好复习（ 伪类选择器 伪类是什么？ 伪类用于定义元素的特殊状态，比如鼠标悬浮在按钮上，按钮颜色会变就是一个例子。 链接伪类选择器 修改链接状态的选择器 点击查看-连接选择器-代码 <!DOCTYPE html> <html> <head> <title>
源代码链接： https://pan.baidu.com/s/1cDehMieTufSbZRBR6sqVYQ 提取码：x0pz 下载后直接双击餐厅练习中的index.html文件，然后就一关一关做就好 答案都以代码段形式给出~ W3C关于CSS选择器的说明：CSS 伪类 关卡操作说明： 1.直接选择所有的plate元素 plate 2.直接选择所有的bento元素
00.样例 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title>isolated star学习四个伪类选择器</title> <style typ
