【前端从0开始】CSS3新增选择器

CSS3新增选择器

1 什么是CSS3

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效(阴影)、多栏布局(display:flex)、2D3D和动画等模块

2 CSS选择器

选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div><p> 元素。 1
element element div p 选择 <div> 元素内的所有 <p> 元素。 1
element>element div>p 选择父元素为 <div> 的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性的所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。注意:title= "flower red" 不能使用了 2
` [attribute =value]` `[class =box]`
伪类选择器 示例 描述
:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。
:focus input:focus 选择获得焦点的 input 元素。(IE8及以上才支持)
:first-letter p:first-letter 选择每个 <p> 元素的首字母。
:first-line p:first-line 选择每个 <p> 元素的首行。(加边框不行,字号可以)
:first-child p:first-child 选择属于父元素的第一个子元素的每个<p>元素。
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 元素的内容之后插入内容。
相关推荐
kymjs张涛22 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵27 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62239 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
土豆12502 小时前
提升CSS开发效率的必备Chrome插件
css·chrome