好得很程序员自学网
  • 首页
  • 后端语言
    • C#
    • PHP
    • Python
    • java
    • Golang
    • ASP.NET
  • 前端开发
    • Angular
    • react框架
    • LayUi开发
    • javascript
    • HTML与HTML5
    • CSS与CSS3
    • jQuery
    • Bootstrap
    • NodeJS
    • Vue与小程序技术
    • Photoshop
  • 数据库技术
    • MSSQL
    • MYSQL
    • Redis
    • MongoDB
    • Oracle
    • PostgreSQL
    • Sqlite
    • 数据库基础
    • 数据库排错
  • CMS系统
    • HDHCMS
    • WordPress
    • Dedecms
    • PhpCms
    • 帝国CMS
    • ThinkPHP
    • Discuz
    • ZBlog
    • ECSHOP
  • 高手进阶
    • Android技术
    • 正则表达式
    • 数据结构与算法
  • 系统运维
    • Windows
    • apache
    • 服务器排错
    • 网站安全
    • nginx
    • linux系统
    • MacOS
  • 学习教程
    • 前端脚本教程
    • HTML与CSS 教程
    • 脚本语言教程
    • 数据库教程
    • 应用系统教程
  • 新技术
  • 编程导航
    • 区块链
    • IT资讯
    • 设计灵感
    • 建站资源
    • 开发团队
    • 程序社区
    • 图标图库
    • 图形动效
    • IDE环境
    • 在线工具
    • 调试测试
    • Node开发
    • 游戏框架
    • CSS库
    • Jquery插件
    • Js插件
    • Web框架
    • 移动端框架
    • 模块管理
    • 开发社区
    • 在线课堂
    • 框架类库
    • 项目托管
    • 云服务

当前位置:首页>前端开发>HTML与HTML5
<tfoot draggable='sEl'></tfoot>

CSS你可能还不知道的一些知识点_html/css_WEB-ITnose

一、 特殊选择器

1、 * 用于匹配任何的标记

2、 > 用于指定父子节点关系

3、 E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

4、 E ~ F 匹配所有E元素之后的同级元素F

5、 名称[表达式]

5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签;E[att=val] 匹配所有att属性等于“val”的E元素;

5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签;

5.3 [att^=val]获取所有定义了att属性并且属性值以val开头的标签;

5.4 [att$=val]获取所有定义了att属性并且属性值以val结尾的标签;

5.5 [att*=val]获取所有定义了att属性并且属性值包含val字符的标签;

5.6 [att~=val]获取所有定义了att属性并且属性值包含val单词的标签;

5.7 [att|=val]获取所有定义了att属性并且属性值等于val或者以val-开头的标签。)

6、伪类/伪元素

6.1 css 伪类用于向某些选择器添加特殊的效果。css 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类伪元素种类区别

这里用伪类 :first-child 和伪元素 :first-letter 来进行比较。

p>i:first-child {color: red}

first second

//伪类 :first-child 添加样式到第一个子元素

如果我们不使用伪类,而希望达到上述效果,可以这样做:

.first-child {color: red}

first second

即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看为元素:

:p:first-letter {color: red}

i am stephen lee.

//伪元素 :first-letter 添加样式到第一个字母

那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?

.first-letter {color: red}

i am stephen lee.

即我们给第一个字母添加一个 span,然后给 span 增加样式。

两者的区别已经出来了。那就是:

伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到 ,这也是为什么他们一个称为伪类,一个称为伪元素的原因。

总结:

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

:pseudo-classes::pseudo-elements但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

简单的说呢:伪元素的权重比伪类高,比如一个容器的为元素和伪类都定义了同一属性,但值不一样,那么将采用伪元素的。 从规范的角度伪元素一个页面只使用一次,而伪类可以多次使用。伪元素产生新对象,在dom中看不到,但是可以操作;伪类是dom中一个元素的不同状态;

6.1 常用的伪类

6.1.1 a:hover,a:link,a:active,a:visited,:focus,:blur /*动态伪类*/

6.1.2 :disabled,:enabled,:checked,:read-only,:read-write /*UI状态伪类*/

6.1.2.1 :read-only 只对状态

6.1.2.2 :read-write 非只读状态

6.1.3 css3伪类

6.1.3.1 :nth-child(n)其父元素的第n个元素(如:p:nth-child(2){color:red;} p元素是其父元素的第2个元素的话字体颜色就是红色)

6.1.3.2 nth-last-child(n) 其父元素的倒数第n个元素

6.1.3.3 :nth-of-type(n) (如:p:nth-of-type(2){color:red;} p元素是其父元素的第2个p元素的话字体颜色就是红色)

6.1.3.4 :first-child 其父元素的第一个元素

6.1.3.5 :last-child 其父元素的最后一个元素

6.1.3.6 nth-last-of-type(n) (如:p:nth-last-of-type(2){color:red;} p元素是其父元素的倒数2个p元素的话字体颜色就是红色)

6.1.3.7 :first-of-type 其父元素的第一个p元素

6.1.3.8 :last-of-type 其父元素的最后一个p元素

6.1.4 :not() /*否定伪类选择器*/ (如:p:not(.a){color:red;})

6.2 常用的伪元素

6.2.1 :before,::after

 p::before{content:"台词:";}   

我是唐老鸭。

我住在 Duckburg。

注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。

6.2.2 ::first-letter

 p::first-letter{color:red;}   

我是唐老鸭。

我住在 Duckburg。

注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。

6.2.3 ::first-line

 p::first-line{color:red;}   

我是唐老鸭。

我住在 Duckburg。

注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。

6.2.4 ::selection

 ::selection{color:red;background-color:#00F;}   

我是唐老鸭。

我住在 Duckburg。

注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。注释:对于在 IE8 中工作的 :before,必须声明 DOCTYPE。

二、 CSS权重

1、 权重列表

 /*A>B>C>D>0*/.main-content{color:#666;}/*0*/h3{color:#f00;}/*D*/.h3{color:#0f0;}/*C*/.main-content h3{color:#00f;}/*CD*/.main-content .h3{color:#0ff;}/*CC*/#h3{color:#ff0;}/*B*/   

你好

查看更多关于CSS你可能还不知道的一些知识点_html/css_WEB-ITnose的详细内容...

声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did109595
更新时间:2022-11-17   阅读:28次

上一篇: 超链接的那些事(二):属性href_html/css_WEB-ITnose

下一篇:CSSReset详细分析_html/css_WEB-ITnose

相关资讯

最新资料更新

  • 1.html5教程-HTML5多媒体audio和video(一)
  • 2.html5教程-CSS reset的重新审视 – 避免样式重置
  • 3.html5教程-使用CSS3 ::selection伪元素改变文本选中颜色
  • 4.html5教程-说说CSS学习中的瓶颈
  • 5.html5教程-关于Google圆角高光高宽自适应按钮及其拓展
  • 6.html5教程-在html5中,使用localStorage存储的数据放在哪个文件里?
  • 7.html5教程-HTML5:嵌入内容
  • 8.html5教程-小tip: CSS动态实现文本框清除按钮的隐藏与显示
  • 9.html5教程-H5基础选择器
  • 10.html5教程-HTML5-ajax
  • 11.html5教程-小tip:CSS3下的圆形遮罩效果实现与应用
  • 12.html5教程-web页面相关的一些常见可用字符介绍
  • 13.html5教程-css行高line-height的一些深入理解及应用
  • 14.html5教程-H5前端性能测试快速入门
  • 15.html5教程-canvas 让你呼风唤雨,下雨下雪效果
  • 16.html5教程-纯CSS实现各类气球泡泡对话框效果
  • 17.html5教程-2016.3.16__HTML5新特性__第八天
  • 18.html5教程-借助wbr标签实现连续英文字符的精准换行
  • 19.html5教程-翻译 – CSS3 Backgrounds相关介绍
  • 20.html5教程-HTML5浏览器支持

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网」
[ SiteMap ]