CSS3 样式选择器

=============================
CSS样式选择器
=============================

css3 级联样式表
CSS3 新的特性
2D、3D效果
其它动画效果

样式选择器

.class 类选择器 <input class="样式名"/>
#id id选择器 <input id="样式名" />
* 全匹配所有的标签都会自动应用该样式
element 标签选择器 table{样式内容}
element,element 组合
同时定义多种样式
input, div, select{
color:red;
}
//同下
input{
　　color:red;
}
div{
　　color:red;
}
select{
　　color:red;
}

element element2 子级
table tr{
表示给table标签中的tr写的样式
}
<table>
　　<thead>
　　<tr></tr>
　　</thead>
　　<tr></tr>
</table>

element>element2 子级(element2标签上级是element标签的标签)
table>tr{样式内容}
<table>
　　<tr></tr>
　　　　<thead>
　　<tr></tr>
</thead>
</table>

element+element2 相邻的兄弟(找之后的第一个)
div+p{
样式内容
}
<div></div>
<p></p>

element~element2 相邻的兄弟(找之前的第一个)

div~p{
样式内容
}
<p></p>
<div></div>

table~span{

}

[attribute] 包含指定属性名的标签
[attribute=value] 包含指定属性名并指定属性值的标签
[attribute~=value] 包含指定属性名的属性值(单词包含属性值中使用空格分隔单词 )
[attribute|=value] 包含指定属性名及以指定的属性值开头(如果属性值有更多的内容必须使用-分隔)
p[title|=abcd]{样式内容}
<p title="abcd-XXXX"></p>

[attribute^=value] CSS3 包含指定的属性名及以指定的属性值开头的标签
[attribute$=value] CSS3 包含指定的属性名及以指定的属性值结尾的标签
[attribute*=value] CSS3 包含指定的属性名及以包含指定的属性值的标签

var reg=/^abcd$/;

CSS3更多选择器
:first-of-type p:first-of-type
选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

:last-of-type p:last-of-type
选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

:on-of-type p:only-of-type
选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

:only-child p:only-child
选择属于其父元素的唯一子元素的每个 <p> 元素。

:nth-child(n) p:nth-child(2)
选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n) p:nth-last-child(1)
同上，从最后一个子元素开计数。始

:nth-of-type(n) p:nth-of-type(2)
选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

:nth-last-of-type(n) p:nth-last-of-type(1)
同上，但是从最后一个子元素开始计数。

:last-child p:last-child
选择属于其父元素最后一个子元素每个 <p> 元素。

:root :root 选择文档的根元素。 <html>

:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。

:target #news:target 选择当前活动的 #news 元素。

:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素

:checked input:checked 选择每个被选中的 <input> 元素。

:not(selector) :not(p) 选择非 <p> 元素的每个元素。
#div8 :not(p){}
应用给div8标签中的所有非P标签

::selection ::selection 选择被用户选取的元素部分。

posted @ 2021-01-03 14:36 FourAu 阅读(341) 评论(0) 收藏举报

刷新页面返回顶部

FourAu

CSS3 样式选择器

公告