1、基本选择器
(1)标签选择器,示例表示选择所有p元素
p {
font-size:15px;
color:#00796b;
}
(2)类选择器,示例表示选择 class="my-font" 的所有元素
.my-font {
font-size: 18px;
font-weight: bold;
}
(3)ID选择器,示例表示选择 id="poetry" 的所有元素
#poetry {
font-size: 16px;
margin: auto;
text-align: center;
color: #00796b;
}
(4)通配选择器(通配符),示例表示选择所有元素
* {
font-size: 14px;
margin: auto;
text-align: center;
color: #00796b;
}
2、组合选择器
(1)包含选择器
包含选择器通过空格标识符来表示,示例表示选择 <div> 元素内部的所有 <p> 元素
div p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
(2)子选择器
子选择器以“>”表示,示例表示选择父元素为 <div> 元素的所有 <p> 元素
div > p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
(3)相邻选择器
相邻选择器通过“+”分隔符进行定义,指定的元素关系是兄弟关系。示例表示选择紧接在 <div> 元素之后的所有 <p> 元素
div+p {
color: #00796b;
font-size: 20px;
font-weight: bold;
}
(4)兄弟选择器
兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点,以“~”表示。示例表示选择前面有 <h1> 元素的每个 <p> 元素
h1~p{
color: #00796b;
font-size: 20px;
font-weight: bold;
}
(5)分组选择器
分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。
span, h1, h2, p {
color: #00796b;
font-size: 20px;
font-weight: bold;
}
3、属性选择器
CSS3在CSS2的基础上新增了3个属性选择器,分别是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三个新增的选择器和已定义的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同构成强大的HTML属性过滤器。
/* E[attr] 包含属性attr的元素 */
/* <span id="demo">啦啦啦</span> */
[id] {
color: #00796b;
}
[title] {
font-size: 35px;
color: #00796b;
}
[title][href] {
color: darkolivegreen;
text-decoration: none;
}
/* E[attr="value"] 属性attr的属性值等于value的元素 */
/* <a href="#pick">啦啦啦</a> */
[href="#pick"] {
font-size: 22px;
color: green;
text-decoration: none;
}
/* E[attr~="value"] 属性attr的属性值中有等于value的元素 */
/* <p class="important warning">啦啦啦</p> */
[class~="important"] {
font-size: 35px;
color: blue;
}
/* E[attr^=value] 属性值以value开头 */
/* <p class="onesteep">啦啦啦</p> */
[class^="one"] {
font-size: 12px;
color: #999999;
}
/* E[attr$=value] 属性值结尾是value */
/* <p class="onesteep">啦啦啦</p> */
[class$="steep"] {
font-size: 32px;
color: darkorange;
}
/* E[attr*=value] 属性值里存在有value字符 */
/* <p class="onesteep">啦啦啦</p> */
[class*="te"] {
font-size: 15px;
color: darkmagenta;
}
/* E[attr|="value"] 属性值是value或者以value-开头 */
[class|="demo"] {
font-size: 35px;
color: #00799b;
}
4、伪类选择器
(1)动态伪类选择器
/*链接没被访问时为黑色*/
a:link{
color: black;
}
/*链接被访问后为灰色*/
a:visited{
color: gray;
}
/*鼠标放在连接上时显示为蓝色*/
a:hover{
color: blue;
}
/*鼠标点击时激活链接那一下显示为绿色*/
a:active{
color: green;
}
(2)结构伪类选择器
结构伪类选择器是CSS3新设计的选择器,TA利用HTML的树状结构实现元素选择,可以减少class属性和id属性的定义
1、:first-child:选择一个元素的第一个子元素(不支持ie6)
2、:last-child:选择一个元素的最后一个子元素
3、:nth-child():选择某个元素的一个或多个特定的子元素(不支持ie6~ie8)
/*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
.demo li:nth-child(n) {
border:1px solid #999999;
}
/*选中0,2,4,6,8...*/
li:nth-child(2n) {
border:1px solid #999999;
}
/*选中0,1,3,5,7...*/
li:nth-child(2n-1) {
border:1px solid #999999;
}
/*选中5,6,7,8,9...*/
li:nth-child(n+5) {
border:1px solid #999999;
}
/*选中5,4,3,2,1*/
li:nth-child(-n+5) {
border:1px solid #999999;
}
/*选中1,4,7,10...*/
li:nth-child(3n+1) {
border:1px solid #999999;
}
4、:nth-last-child():选中某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始计算(不支持ie6~ie8)
5、:nth-of-type():选择指定的元素(不支持ie6~ie8)
6、:nth-last-of-type():选择指定的元素,从元素的最后一个开始计算(不支持ie6~ie8)
7、:first-of-type:选择一个上级元素下的第一个同类子元素(不支持ie6~ie8)
8、:last-of-type:选择一个上级元素下的最后一个同类子元素(不支持ie6~ie8)
9、:only-child:选择的元素是他的父级元素的唯一子元素(不支持ie6~ie8)
10、:only-of-type:选择一个上级元素的唯一一个同类型的子元素(不支持ie6~ie8)
11、:empty:选择的元素里面没有任何内容(不支持ie6~ie8)
(3)否定伪类选择器(不支持ie6~ie8)
:not()表示否定伪类选择器,表示排除掉特定元素
(4)状态伪类选择器(不支持ie6~ie8)
状态伪类选择器主要是针对表单设计的,状态伪类选择器就是控制UI元素状态的,可不可用,选没选中,获取或失去焦点,锁定、待机等
1、:enabled:匹配指定范围内所有可用的表单元素
2、:disabled:匹配指定范围内所有禁用的表单元素
3、:checked:匹配指定范围内所有被选中的元素
(5)目标伪类选择器(不支持ie8及以下)
:target:选择当前活动的元素,当存在URL指向该匹配元素时,样式效果才被执行
/* 在URL后面附加'#news',以锚点方式链接到id为news的元素时,该元素的样式就会发生相应的变化 */
#news:target {
font-size: 32px;
background-color: #00765b;
margin: auto;
text-align: center;
}