CSS3学习笔记之选择器

新增的关系选择器有：

1.亲儿子选择器：>

2.下一个兄弟：+

3.下一群兄弟：~

新增的属性选择器：

1.标签[^="a"] : 匹配属性值以a开头的元素

2.标签[$="a"]: 匹配属性值以a结尾的元素

3.标签[*="a"]: 匹配属性值含有a的元素

4.标签[|="a"]: 匹配属性值以a开头，紧跟一个-的元素

5.标签[~="a"]: 匹配属性值是一个独立的用空格分开的个体

原文地址：https://www.cnblogs.com/qingxiawu/p/8506279.html

时间： 2024-07-29 10:21:29

CSS3学习笔记之选择器的相关文章

[CSS3] 学习笔记-CSS选择器

CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{},a{} 2.选择器分组:h1,h2{}.*{} 3.类选择器允许以一种独立于文档元素的方式来指定样式:.class{}: 可以结合元素选择器:a.class{}: 多类选择器:.class.class{} 4.ID选择器与类选择器相似,不过也有一些重要差别,例如:#id{} ID选择器与类选择器的

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

CSS学习笔记(1):选择器

一.元素选择器 HTML文档元素就是最基本的选择器如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> &

CSS3学习系列之选择器（二）

first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l

[CSS3] 学习笔记-CSS3选择器详解（一）

1.属性选择器在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 /*id包含div字符串,就加载效果*/ 8 [id*=div]

CSS3学习笔记(1)-CSS3选择器

CSS3与CSS2相比发生了很大的变化,CSS3的亮点功能包括实现圆角.阴影.新的flex伸缩布局模型.多列布局模型.填充色的渐变.2D变形(位移.缩放.旋转.倾斜).3D变形.动画(transition过渡动画.animation关键帧动画)等.看到这些字眼,你实际上已经可以深深感受到CSS3的野心,通过这些东西基本上都可以做出很棒的多媒体演示了,flash.Powerpoint制作演示也无外乎这些东西而已! 确实如此,CSS从CSS3开始,已经从单纯的实现静态页面元素布局美化之中超脱出来,向

CSS3学习笔记一（选择器）

属性选择器: E[attr] 包含attr属性的E E[attr="value"] 包含attr属性值为value的E E[attr~="value"] 包含attr属性的值列表中含有value的E E[attr^="value"] 包含attr属性的值是以value开头的E E[attr$="value"] 包含attr属性的值是以value结束的E E[attr*="value"] 包含attr属性的值

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制.上代码. <!DOCTYPE html><html> <head> <title>Ball.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&g

我的CSS3学习笔记

1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val]:属性值完全等于val E[attr*=val]:属性值里包含val字符并且在"任意"位置 E[attr^=val]:属性值里包含val字符并且在"开始"位置 E[attr$=val]:属性值里包含val字符并且在"结束"位置 3.CSS3伪类选择