当前位置:首页 > 建站教程 > 建站经验

CSS3选择器

懒鸟飞 发布于

复习之前学过的css选择器

.box 类名选择器
#box id选择器
div p 后代选择器
div.box 交集选择器
div,p,span 并集选择器
div>p 子代
* : 通配符
div+p: 选中div后面相邻的第一个p
div~p: 选中的div后面所有的p

 
//css3选择器
1.属性选择器  []    通过标签属性来选择器

 
/*div 带有class属性  背景色变红*/
div[class]{
    background-color: red;
}

 
/*div 带有class属性 ,并且值为 box1*/
div[class="box1"]{
    background-color: pink;
}
/* div 带有class属性 ,并且值以 aa开头*/
div[class^="aa"]{
    background-color: green;
}

 
/* div 带有class属性 ,并且值以 aa结尾*/

div[class$="aa"]{
     background-color: orange;
}

 

/* div 带有class属性 ,并且值包含aa*/
div[class*="aa"]{
    background-color: #daa520;
}

伪类选择器

div:empty{}    如果div里面没有其他dom元素的话会被选中

h2:target   伪类 要配合锚点使用,表示被激活的状态
h2:target{
color:red
}

 
<a href="#box">
<h2 id=”box”>

伪类选择器--结构伪类

:first-child      第一个
:last-child       最后一个
:nth-child(11)    1--11个
:nth-child(odd)   奇数
:nth-child(even)  偶数
:nth-child(2n)    奇数
:nth-child(2n+1)       偶数
:nth-child(-n+5)       选中前五个 
:nth-last-child(-n+5)  选中后五个   

伪元素选择器

::before ,::after 通过 css 模拟出来html标签的效果
注意:必须有content属性才行

 
::first-letter  选中第一个字母
::first-line    选中第一行的伪元素的选择器

转载请注明原文地址:http://www.lazybirdfly.com/a/jzjy/965.html
留言与评论(共有 条评论)

   
验证码: