CSS3_01

Aug 22, 2016 am 10:13 AM

1、兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2;②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2;

2、属性选择器:attr表示属性名称,elem表示元素名;①[attr]:页面中所有带有attr属性的元素;②elem[attr]:页面中所有带attr属性的elem元素;③elem[attr1][attr2]……:页面中所有既带attr1属性又带attr2属性……的elem元素;④elem[attr=value]:页面中所有带attr属性,且其值为value的elem元素;⑤elem[attr~=value]:页面中所有带attr属性且其值列表中包含独立值value的elem元素(多用于元素class类属性);⑥elem[attr^=firstchar]:页面中所有带attr属性且其值以firstchar(一个字母或字符串)开头的elem元素;⑦elem[attr$=lastchar]:页面中所有带attr属性且其值以lastchar(一个字符或字符串)结尾的elem元素;⑧elem[attr*=everchar]:页面中所有带attr属性且其值包含everchar(一个字符或字符串)字符的elem元素;

3、目标伪类:~:target,凸显html锚;

4、元素状态伪类:①~:enabled,每个被启用的元素;②~:disabled,每个被禁用的元素;③~:checked,每个被选中的元素(单选/复选框);

5、结构伪类:①~:first-child,其父元素的首个子元素;②~:last-child,其父元素的最后一个子元素;③~:nth-child(n),其父元素的第n个子元素;④~:empty,所有没有子元素的元素(没有子元素即没有内容,没有空格换行);⑤~:only-child,其父元素中的唯一子元素;

6、否定伪类:~:not(selector),该元素中所有不满足selector选择器的元素;

7、伪元素选择器:①~:first-line或~::first-line,该元素的首行;②~:first-letter或~::first-letter,该元素的首字符;③~::selection,该元素下用户选中区域部分;

8、计数器:①声明/复位计数器:counter-reset:计数器名称 值;(* 值可省,默认为0;可一次声明多个,counter-reset:名1 值1 名2 值2……;计数器声明不能放在使用的元素上;);②计数器增量:counter-increment:计数器名称 增量值;(* 不可省,默认值为1,放于使用元素中;);③计数器调用:counter(计数器名称);(放于调用元素中);

9、内容生成:①选择器::before和:after,生成位置前/后;②属性:content,插入的内容,取值:url()(插入图像)/字符串(“纯文本”)/计数器(有规律的数字);

10、多列:①分割列:column-count:数字;②列间隔:column-gap:数字px;③列规则:column-rule:宽 样式 颜色;(* 即列间隔边框样式);④兼容性:IE10+,Opera支持;

11、CSS Hack:①CSS类内部:样式规则加前缀;-:IE6;+:IE7;②选择器:选择器加前缀:*:IE6;*+:IE7;③头部引用:内容……;(* 条件:a、gt:大于;b、gte:大于等于;c、lt:小于;d、lte:小于等于;!非IE;);④媒体查询:@media screen{};

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

如何使用JavaScript区分关闭浏览器标签页和关闭整个浏览器? 如何使用JavaScript区分关闭浏览器标签页和关闭整个浏览器? Apr 04, 2025 pm 10:21 PM

如何在浏览器上使用JavaScript区分关闭标签页和关闭整个浏览器?在日常使用浏览器的过程中,用户可能会同时�...

See all articles