菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础第五天-范建荣-20230414 [打印本页]

作者: °荣 时间: 2023-4-14 20:31
标题: 前端基础第五天-范建荣-20230414

一、学习内容

css的复合选择器

后代选择器

概念：又叫做包含选择器，可以选择父元素里面所有复合条件的子元素

语法

元素1 元素2 {css样式}

元素1代表父元素，元素2代表子元素

元素1和元素2之间要用空格隔开，

元素2可以是儿子也可以是孙子

元素1和元素2可以是任意的选择器

子选择器：

概念：只能选择某个父元素最近的一级子元素，

语法：

元素1>元素2{css的样式代码}

表示选择元素1里面最近的一级元素2

并集选择器

概念：可以选择多组标签，同时为他们定义相同样式，通常是用于集体声明

并集选择器是各组选择器通过英文的逗号链接

伪类选择器

伪类选择器是附加在其他的选择器之一的一种选择器，可以来添加特殊的效果

链接伪类选择器

因为伪类选择器比较多，链接伪类的使用，是最频繁的

：hover

a:hover 选择鼠标悬浮在链接上

：link

a:link 选择所有未被访问过的链接

：active

a:active 选择所有链接，当鼠标按下链接时

：visited

a:visited 选择所有已被访问过的链接

焦点伪类选择器

：focus

焦点伪类选择器用于选取获得焦点的元素，只有表单元素获取焦点的时候的

总结：伪类选择器和css来的选择器一样，可以附加在其他的选择器上

向选择器添加伪类选择器的时候，必须保证选择器支持这种

Css的元素显示模式

概念：就是元素的显示方式，以什么养的形式来显示，h1标签自己占一行，span标签一行会有多个

块元素

常见的块元素

h1-h6 <p></p> <div></div> <ul></ul> <li></li>等等，<div></div>是典型的块元素

特点：自己独占一行；

高度和宽度可以设置

宽度是默认是和父元素宽度保持一致的

块元素里面可以放行内元素也可以放块元素

注意点：

文字类的元素内不能使用块元素

比如p标签只能放文字，不要放其他的块元素，特别是<div>,因为会造成语义混乱情况

行内元素

常见的行内元素

<span></span> <strong></strong> <a></a> <i></i>等等

特点：

相邻的行内元素在一行上进行展示，一行可以显示多个

设置宽高无效

默认的宽度和高度是他里面内容的宽高

行内元素只能容纳文本或者其他的行内元素

注意点：

链接里面不要再套链接

如果a标签里面嵌套了块元素，那么就需要先将a标签转化为块元素才可以

行内块元素

Img，input

特点

相邻的元素在一行上进行显示，但是他们之间有空白间隙（行内元素的特点）

高度、宽度都是可以设置的（块元素）

元素的显示模式转换

转化为块元素： display:block;

转化为行内元素：display:inline;

转化为行内块元素：display:inline-block;

二、遇到的问题

无

三、解决方案

无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)