ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端HTML5/HTML+CSS3/CSS学习笔记(三)

2022-02-20 11:58:01  阅读:157  来源: 互联网

标签:CSS3 超链接 样式 元素 HTML HTML5 选择器 CSS 属性


CSS3选择器

属性选择器

E[att^=value] 属性选择器
是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。 E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。

如:   div[id^=section]
表示匹配包含id属性,且id属性值是以“section”字符串开头的div元素。

E[att$=value]属性选择器
是指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样,E元素可以省略,如果省略则表示可以匹配满足条件的任意元素。

如:    div[id$=section]
表示匹配包含id属性,且id属性值是以“section”字符串结尾的div元素。

E[att*=value]属性选择器
用于选择名称为E的标记,且该标记定义了att属性,att属性值包含value子字符串。该选择器与前两个选择器一样,E元素也可以省略,如果省略则表示可以匹配满足条件的任意元素。

如:	div[id*=section]
表示匹配包含id属性,且id属性值包含“section”字符串的div元素。

关系选择器

子代选择器(>):主要用来选择某个元素的第一级子元素。
如: 希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:h1 > strong。

兄弟选择器(+、~)
用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。

临近兄弟选择器:
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第2个元素必须紧跟第1个元素。

普通兄弟选择器:
使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲,但第2个元素不必紧跟第1个元素。

结构化伪类选择器

root选择器
用于匹配文档根元素,在HTML中,根元素始终是html元素。也就是说使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。

not选择器
如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用:not选择器。

only-child 选择器
用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某个父元素仅有一个子元素,则使用“:only-child 选择器”可以选择这个子元素。

first-child和:last-child选择器
分别用于为父元素中的第一个或者最后一个子元素设置样式。

nth-child(n)和:nth-last-child(n)选择器
分别用于为父元素中的第二个或者倒数第二个子元素设置样式。

nth-of-type(n)和:nth-last-of-type(n)选择器
用于匹配属于父元素的特定类型的第 n 个子元素和倒数第n个子元素。

empty选择器
用来选择没有子元素或文本内容为空的所有元素。

target选择器
用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。

伪元素选择器
before伪元素选择器
用于在被选元素的内容前面插入内容,必须配合content属性来指定要插入的具体内容。


如:
<元素>:before
{
	content:文字/url();
}

after伪元素选择器
用于在某个元素之后插入一些内容,使用方法与:before选择器相同。

链接伪类

链接伪类
定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。在CSS中通过链接伪类可以实现不同的链接状态

超链接标记<a>的伪类(每个样式只能对应应用一次)

超链接标记<a>的伪类含义
a:link{ CSS样式规则; }未访问时超链接的状态
a:visited{ CSS样式规则; }访问后超链接的状态
a:hover{ CSS样式规则; }鼠标经过、悬停时超链接的状态
a:active{ CSS样式规则; }鼠标点击不动时超链接的状态

补充知识点:

优先级:
内联样式>内部样式>外部样式
内联样式:由css样式选择符和声明组成,而声明又由属性和值组成
选择符:{属性:值} 例:p{color:red}
选择符:又称选择器,指明网页中要应用样式规则的元素
内部样式:代码通常放在标签内
外部样式引入:link @import
群组选择器:如h1,h2{} 中间用逗号连接

考点:

  1. link和@import的区别(无样式闪烁问题FOUC)
    @import是CSS提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS,rel连接属性等。
    加载页面时,link标签引入的CSS被同时加载;@import引入的CSS将在页面加载完毕后被加载。
    @import是CSS2.1才有的语法,故只可在IE5+才能识别;link标签作为HTML元素,不存在兼容性问题。
  2. 三种引入样式的优先级
  3. 选择符的优先级
通配符0
标签1
类/伪类/属性10
ID100
行内样式1000
important1/0(无穷大)

标签:CSS3,超链接,样式,元素,HTML,HTML5,选择器,CSS,属性
来源: https://blog.csdn.net/weixin_51227348/article/details/123028705

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有