关于css3的css3属性选择器器的理解

CSS3属性选择器
属性选择器
1、E[attr] 表示存在attr属性即可;
2、E[attr=val] 表示属性值完全等于val
3、E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的
4、E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
5、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置
6、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
7、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置
伪类选择器
重点理解E是用来参考确定其父元素的,E:nth-child(n) 对应根据E元素确定的父元素的所有子元素,E:nth-of-type(n) 的不同之处在于其对应的是只有E元素,会忽略其子元素(只管同级兄弟元素,忽略同级中的孩子)
1、E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素(只是E,其他不同兄弟不管)
2、E:nth-of-type(n) 第n个子元素,计算方法只是E元素,会忽略其子元素的存在
3、E:nth-last-child(n) 同E:nth-child(n) 计算顺序相反。
4、E:nth-last-of-type(n) 同E:nth-of-type(n) 计算顺序相反。
5、E:only-child 表示当前以E确定的父元素,除E之外并无其它子元素(独生子);
6、E:only-of-type表示当前以E确定的父元素, 除E之外不能包含其它和E同类型的子元素;
7、E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
8、E:empty 选中没有任何子节点的E元素;
n遵循线性变化,其取值1、2、3、4、…
伪元素选择器
1.E::selection 可改变选中文本的样式
2.E::placeholder 可改变placeholder默认样式,这个存在明显的兼容问题,比如::-webkit-input-placeholder,具体参考手册进行对比。
3.E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待。
“:” 与 “::” 区别在于区分伪类和伪元素
关于n的取值范围:
1.当n做为一个独立值时,n取值为n&=1,例如nth-child(n)
2.当n做一个系数时,n取值为n&=0,例如nth-child(2n+1)、nth-child(-n+5) 此处需要理解2n+1或者-n+5做为一个整体不能小于1;
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&选择器 - 日历&
margin: 0;
padding: 0;
background-color: #F7F7F7;
list-style: none;
.calendar {
width: 385px;
height: 312px;
padding: 48px 141px 10px 12px;
margin: 100px auto;
background: url(image/bg.jpg) 0 0 no-repeat;
.calendar , .calendar
overflow: hidden;
display: block;
width: 48px;
height: 48px;
text-align: center;
margin-right: 1px;
border: 3px solid transparent;
float: left;
border-top: 1px solid #5CADFF;
height: 28px;
line-height: 34px;
font-size: 14px;
border-top: 1px solid #c8cacc;
cursor: pointer;
display: block;
line-height: 1;
height: 26px;
line-height: 30px;
font-size: 18px;
font-family: Arial;
font-weight: normal;
color: #999;
font-size: 12px;
font-style: normal;
:first-child {
color: red;
:nth-of-type(n) {
color: yellow;
:last-child { color:pink; }
:last-child {color: #23527c}
class="calendar"&
data-range="prev-month"&
class="today"&
&艾滋病日&
data-flag="festival"&
data-flag="festival"&
data-range="next-month"&
data-range="next-month"&
data-range="next-month"&
看过本文的人也看了:
我要留言技术领域:
取消收藏确定要取消收藏吗?
删除图谱提示你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?
删除节点提示无法删除该知识节点,因该节点下仍保存有相关知识内容!
删除节点提示你确定要删除该知识节点吗?CSS3属性选择器
时间: 01:08:54
&&&& 阅读:144
&&&& 评论:
&&&& 收藏:0
标签:&div id="section1"& 示例文本1&/div&
&div id="subsection1-1"&示例文本1-1&/div&
&div id="subsection1-2"&示例文本1-2&/div&
&div id="section2"&示例文本2&/div&
&div id="subsection2-1"&示例文本2-1&/div&
&div id="subsection2-2"&示例文本2-2&/div&
CSS2中使用属性选择器来设置
&style type=text/css&
[id = section1]{
& & &background:
CSS3中的属性选择器
1.[att*=val]属性值包含用val指定的字符
[id*=section]{
& & background:
则页面中id为"section1"、"subsection1-1"、"subsection1-2"的div元素的背景色都变为黄色,因为这些元素的id属性中都包含"section"字符。
2.[att^=val]属性值的开头字符为用val指定的字符,则该元素使用这个样式
[id^=val]{
& &background:
页面中id为"section1"、"section2"的div元素的背景色都变为黄色,因为这些元素的id属性的开头字符都为"section"。
3.[att$=val]结尾字符为用val指定的字符
[id$=\-1]{
& &background:
页面中为"subsection1-1"、"subsection2-1"的div元素的背景色变为黄色,因为其以"-1"结尾。
注意:要在指定的匹配字符前必须加上"\"这个escape字符。标签:原文地址:http://www.cnblogs.com/wyaocn/p/5836032.html
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码!css3常用属性之选择器_CSS教程_动态网站制作指南
css3常用属性之选择器
来源:人气:1461
3常用属性之选择器之前记录过一篇关于css3属性在表现方面的例子,今天在来讲讲css3选择器的使用方法。第一个子节点;first-child
/*first-child 所在元素为父元素的第一个子节点*/
ul li:first-child{
}<img src="http://www.cnblogs.com/leeten/p/data:image/base64,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
优质网站模板CSS 选择器参考手册
CSS 选择器参考手册
我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。
CSS3 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
&CSS& 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)
选择 class=&intro& 的所有元素。
#firstname
选择 id=&firstname& 的所有元素。
选择所有元素。
选择所有 &p& 元素。
选择所有 &div& 元素和所有 &p& 元素。
选择 &div& 元素内部的所有 &p& 元素。
选择父元素为 &div& 元素的所有 &p& 元素。
选择紧接在 &div& 元素之后的所有 &p& 元素。
选择带有 target 属性所有元素。
[target=_blank]
选择 target=&_blank& 的所有元素。
[title~=flower]
选择 title 属性包含单词 &flower& 的所有元素。
[lang|=en]
选择 lang 属性值以 &en& 开头的所有元素。
选择所有未被访问的链接。
选择所有已被访问的链接。
选择活动链接。
选择鼠标指针位于其上的链接。
input:focus
选择获得焦点的 input 元素。
p:first-letter
选择每个 &p& 元素的首字母。
p:first-line
选择每个 &p& 元素的首行。
p:first-child
选择属于父元素的第一个子元素的每个 &p& 元素。
在每个 &p& 元素的内容之前插入内容。
在每个 &p& 元素的内容之后插入内容。
p:lang(it)
选择带有以 &it& 开头的 lang 属性值的每个 &p& 元素。
选择前面有 &p& 元素的每个 &ul& 元素。
a[src^=&https&]
选择其 src 属性值以 &https& 开头的每个 &a& 元素。
a[src$=&.pdf&]
选择其 src 属性以 &.pdf& 结尾的所有 &a& 元素。
a[src*=&abc&]
选择其 src 属性中包含 &abc& 子串的每个 &a& 元素。
p:first-of-type
选择属于其父元素的首个 &p& 元素的每个 &p& 元素。
p:last-of-type
选择属于其父元素的最后 &p& 元素的每个 &p& 元素。
p:only-of-type
选择属于其父元素唯一的 &p& 元素的每个 &p& 元素。
p:only-child
选择属于其父元素的唯一子元素的每个 &p& 元素。
p:nth-child(2)
选择属于其父元素的第二个子元素的每个 &p& 元素。
p:nth-last-child(2)
同上,从最后一个子元素开始计数。
p:nth-of-type(2)
选择属于其父元素第二个 &p& 元素的每个 &p& 元素。
p:nth-last-of-type(2)
同上,但是从最后一个子元素开始计数。
p:last-child
选择属于其父元素最后一个子元素每个 &p& 元素。
选择文档的根元素。
选择没有子元素的每个 &p& 元素(包括文本节点)。
#news:target
选择当前活动的 #news 元素。
input:enabled
选择每个启用的 &input& 元素。
input:disabled
选择每个禁用的 &input& 元素
input:checked
选择每个被选中的 &input& 元素。
选择非 &p& 元素的每个元素。
::selection
选择被用户选取的元素部分。

我要回帖

更多关于 css3 多个属性选择器 的文章

 

随机推荐