首页 > 代码库 > css选择器

css选择器

@charset "utf-8";
/*通配符*/
*{
/*外边距 内边距*/
/*margin: 0;*/
/*padding: 0;*/
}
/*标记选择器 元素选择器 作用到整个html所有同类元素*/
p{
/*英文单词*/
/*background-color: yellow;*/
/*16进制*/
/*background-color: #faa;*/
/*rgb值*/
/*background-color: rgb(255,0,0);*/
font-family: "黑体";
border: 1px dashed #000;
}
/*class选择器 类选择器*/
.box1{
width: 100px;
height: 100px;
background-color: pink;
}
/*id选择器*/
#box2{
width: 50px;
height: 50px;
border: 1px solid;
}
#box2:hover{
width: 120px;
}

/*属性选择器*/
input[type="text"]{
border: 2px dashed red;
}

/*伪类*/
/*未访问*/
/*a{*/
/*color: #000;*/
/*}*/
a:link{
color: #000;
}
/*访问后*/
a:visited{
color: lightgrey;
}
/*移入 悬停*/
a:hover{
color: red;
}
/*点击时*/
a:active{
font-size: 30px;
}

/*第一行*/
.box1:first-line{
background-color: greenyellow;
}
.box1:first-letter{
background-color: darkorchid;
}

.ppx:before{
content: "喂!";
font-size: 14px;
}
.ppx:after{
content: "我们走!";
}


ul li:nth-child(7){
/*background-color: pink;*/
}
ul li:nth-last-child(7){
/*background-color: pink;*/
}
/*奇数个*/
ul li:nth-child(odd){
/*background-color: pink;*/
}
/*偶数个*/
ul li:nth-child(even){
/*background-color: yellow;*/
}
ul li:nth-child(4n+3){
background-color: yellow;
}


.p3 span{
border: 1px solid #000;
font-size: 50px;
}
.p3>span{
border: 1px solid red;
}

.pa{
width: 500px;
height: 600px;
background-color: red;
}
/*后代*/
.pa div{
width: 250px;
height: 100px;
background-color: #029ACC;
outline: 1px dashed;
}
/*子级*/
.pa>div{
width: 300px;
height: 200px;
background-color: yellow;
}

/*并集*/
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}

/*.box1,.box2,#p1{*/
/*width: 50px;*/
/*height: 50px;*/
/*}*/

 

css选择器