写点什么

CSS 学习笔记(四)

作者:lxmoe
  • 2022-11-10
    辽宁
  • 本文字数:1185 字

    阅读完需:约 4 分钟

Emmet 语法

快速生成 HTML 结构语法

1.生成标签 直接输入标签名 按 tab 键 比如输入 p 单击 tab 键 即可生成<p></p>


2.如果想要生成多个相同的标签 加上* 比如div*3 这样就可以生成 3 个 div 啦


3.如果有父子级(包含)关系的标签 可以用> 比如ul>li


4.如果是兄弟关系的标签,可以用+ 比如div+p


5.如果生成带有类名或者 id 名字的,直接写.demo 或者 #two tab 键就可以了


6.如果生成的 div 类名是有顺序的,可以用自增符号*5

快速生成 css 样式语法

想要输入宽,就输入 w,按 Tab 键即可自动补全 width,想要输入宽为 200,就输入 w200,按 Tab 键即可自动补全 width:200;高也同理。

CSS 的复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的,复合选择器是由两个 或多个基础选择器,通过不同的方式组合而成的,他相对来说有什么优点呢?他九二一更准确、更高效的选择目标元素。


常用的复合选择器包括:后代选择器子选择器并集选择器伪类选择器等等。

后代选择器

后代选择器又称为包含选择器,可以选择父元素里面子元素。写法为把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。基本语法如下:


元素1 元素2 { 样式声明 }
复制代码


上述语法表示选择元素 1 里面的所有元素 2(后代元素)。


举个小小的例子吧:


ul li { 样式声明 }ul li a { 样式声明 }
复制代码


上述是指选择 ul 里面所有的 li 标签元素,注意元素 1 和元素 2 中间用空格要隔开,元素 1 是父级,元素 2 是子级,最终选择的是元素 2,元素 1 和元素 2 可以是任何的基础选择器。

子选择器

子元素选择器只能选择作为某元素的最近一级子元素。


基本语法如下:


元素1 > 元素2 { 样式声明 }
复制代码


举个小小的例子吧:


div > p{ 样式声明 } 
复制代码


上述是指选择 div 里面的所有最近一级 p 标签元素 ,注意!!!只会选择最近一级的,元素 1 和元素 2 要用大于号隔开,元素 1 是父级,元素 2 是子级,最终选择的是元素 2。

并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。


并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。


基本语法如下:


元素1,元素2 { 样式声明 }
复制代码


上述语法表示同时选择元素 1 和元素 2。


举个小小的例子吧:


ul,div{ 样式声明 }
复制代码


上述是指选择 ul 和 div 标签元素,其中元素 1 和元素 2 中间要用逗号隔开,逗号可以理解为和的意思。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第 n 个元素。


伪类选择器书写最大的特点是用冒号表示,例如:hover


伪类选择器分为两种,比如有链接伪类结构伪类等。

链接伪类

一些常用的语法如下:


a:link  /*选择所有未被访问的链接*/a:visited  /*选择所有已被访问的链接*/a:hover  /*选择鼠标指针位于其上的链接*/a:active /*选择活动的链接(鼠标按下未弹起的链接*/
复制代码


发布于: 刚刚阅读数: 6
用户头像

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

评论

发布
暂无评论
CSS学习笔记(四)_CSS_lxmoe_InfoQ写作社区