JAVA培训学习笔记——CSS3选择器

交集选择器：

多个选择器共同包含的元素

语法：多个选择器连续书写，没空间隔。

p.text{
color: red;}

并集选择器：

多个选择所有匹配的元素

语法：多个选择器连续书写，用逗号进行分隔

#container p,span,em,strong{

color: red;}

相邻兄弟选择器：

相邻的兄弟，必须严格相邻，不允许出现其他元素间隔

h1 + p{

color: red;}

通用兄弟选择器：

所有的同级兄弟 不要求严格相邻

h1 ~ p{

color: red;}

后代选择器

选择指定元素里的所有匹配后代元素

写法：用空格进行间隔

div p{

color: red;}

子代选择器

选择指定元素后的所有直接子代

写法：用 > 进行间隔

div > p{

color: red;}

属性选择器：

p[id^=j]{...} 匹配所有属性以XXX开头的元素

p[id$=u]{...} 匹配所有属性以XXX结尾的元素

p[id*=d]{...} 匹配属性值包含XXX的元素

p[id=p1]{...} 匹配所有属性值等于XXX的元素

伪类选择器：

选中同级别中的第一个元素 如果元素匹配则生效，否则，不生效

p:first-child{ color: yellow;}

选择同级别并且同类型的第一个元素 只会查找类型匹配元素中的第一个

p:first-of-type{ color: red;}

选择同级别中的最后一个元素 如果元素匹配则生效，否则，不生效

p:last-child{ color: yellow;}

选择同级别并且同类型的最后一个元素 只会查找类型匹配元素中的最后一个

p:last-of-type{ color: red;}

选中同级别中的第n个元素 如果元素匹配则生效，否则，不生效。

p:nth-child(4){color: red;}

选择同级别并且同类型的第n个元素 只会查找类型匹配元素中的第n个

p:nth-of-type(3){ color: yellow;}

选中同级别中的倒数第n个元素 如果元素匹配则生效，否则，不生效。

p:nth-last-child(2){ color: yellow;}

选择同级别并且同类型的倒数第n个元素 只会查找类型匹配元素中的第倒数第n个

p:nth-last-of-type(2){ color: yellow;}

选中同级别中的只有一个的元素 如果元素匹配则生效，否则，不生效。

p:only-child{ color: red;}

选择同级别并且同类型的只有一个的元素

p:only-of-type{ color: blue;}

凡是属性值为布尔类型的 如果想生效 它的取值可以有以下几种

1. true
2. 属性值等于属性名
3. 直接给空字符串
4. 只写属性名

如果不想生效，不写就可以！！

<input type="text" value="512040302" disabled>

状态伪类选择器：

/*被禁用的元素*/

input:disabled{ color: red;}

/*可以操纵的元素*/

input:enabled{ color: yellow;}

/*让所有被选择激活的元素 后面紧跟的label元素变色*/

input:checked + label{ color: red;}

其他选择器：

not伪类用来取反

option:not(:checked){

color: black;

}

查找表单中所有不包含name的元素

input:not([name]){ color: green; }

target伪类用来操作所有被指定为锚点的元素

所有的元素都可以用来定义锚点 锚点的指定可以通过两个属性 name和id

name用的比较少，有些浏览器不支持通过name来指定锚点 只支持id

比较通用的方法是同时定义name和id 只需要将name和id的属性值定为一个即可

<em name="top" id="top"></em>

<div style="height: 1000px;background-color: blue"></div>

<a href="#top">返回顶部</a>

段落相关伪类

操作一个段落的首个字符

p::first-letter{

color: red;

font-size: 25px;}

操作一个段落的首行

p:first-line{

color: #F2AD0A;}