CSS3选择器
2017-04-18 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3选择器</title>
<style type="text/css">
/*子代选择器
就是单指section子级里面的div，孙子级的div不会被选中
* P标签嵌套其他块级标签的时候，会把P标签分成2个*/
/*section>div{
background: red;
}*/
/*兄弟选择器
和div同级的section，
section是紧跟在div后面的第一个section*/
/*div + section{
background-color: greenyellow;
}*/
/*兄弟选择器
所有和div同级，并且在div后面的section*/
/*div ~ section{
background: red;
}*/
/*伪类选择器*/
/*所有兄弟姐妹中最大的div
1、从所有兄弟姐妹中寻找第几个
2、找到的这个标签类型必须符合：前面的类型（div）*/
/*div:nth-child(1){
background-color: red;
}*/
/*div:first-child{
}
div:last-child{
}*/
/*在和div同一种类型的标签里面的第一个
nth-child(n)在所有的同级里面查找顺序把第N个标签
nth-of-type(n)在所有同级并且同类型的标签里面查找第n个
*/
/*div:nth-of-type(1){
background: red;
}*/
/*div:first-of-type{
background: red;
}
div:last-of-type{
background-color: red;
}*/
/*.xiaoming:before{
content: "哈哈哈";
background-color: red;
display: block;
width: 200px;
}*/
.xiaoming{
border: 1px solid black;
}
/*after和before都可以理解为是给小明添加的子级元素，
after在最后，before在最前。默认是行级，可以想正常标签一样修改样式。所以可以在after里面写
clear：both来清除浮动*/
.xiaoming:after{
content: "";
display: block;
clear: both;
}
/*.xiaoming:after{
content: "呵呵呵";
background-color: blue;
display: block;
}*/
/*属性选择器
a[title]代表是带有title属性的a标签
a[title="去腾讯"]代表的是title属性值为“去腾讯”的a标签
a[title $="去"]代表title属性值是以去结尾的a标签
a[title ^="去"]代表title属性值是以去开头的a标签
a[title *="去"]代表title属性值是以包含去的a标签*/
a[title *="去"]{
background-color: red;
}
/*input[disabled]{
display: none;
}*/
/*input:not([type=submit])
type类型不是submit的input标签*/
input:not([type=submit]){
background: bisque;
}
</style>
</head>
<body>
<a href="#" title="去百度">百度</a>
<a href="#" title="不去">腾讯</a>
<!--选择器-->
<section>小明爸爸
<div>小明哥哥</div>
<div class="xiaoming">
<div style="width: 300px;height: 300px;background: blue;float: left;"></div>
</div>
<div>小明弟弟</div>
<section>小明大妹妹</section>
<section>小明二妹妹</section>
</section>
<section>小明的叔叔
<div>小明的堂哥</div>
<article>小明的堂姐</article>
<article>小明的堂妹</article>
</section>
<form action="">
<input type="text"/>
<input type="submit" />
</form>
</body>
</html>
