css选择器

一 ,基本选择器

1.    通配符选择器:选择页面的所有标签

*{

padding:0;

margin:0;

}

2.    标签选择器(元素选择器):选择页面中所有这种类型的标签

p{

font-size:50px;

}

3.    class选择器(类选择器):选择页面所有拥有该class值的标签

.redTxt{

color:red;

}

4.    id选择器

#oneH2{

font-size:oblique;

}

5.    群组选择器

.redTxt,div,#oneH2{

background-color:greenyellow;

}

 

二    层次选择器

1.后代选择器

.fatDiv p{

color:white;

}

2.父子选择器

.fatDiv > p{

font-style:oblique;

}

3.相邻兄弟选择器

.sonDiv+div{

font-size:100px;

}

三    伪类选择器

a{

font-size:100px;

color:#000;

}

1.链接没有访问过时的样式

a:link{

background-color:red;

}

2.链接访问过之后的样式

a:visited{

background-color:orange;

}

3.光标移动到元素上时的样式

a:hover{

background-color:green;

}

4.光标点击元素时的样式

a:active{

background-color:blue;

}

           /*1, 链接没有访问过时的样式*/
            h4:link {
                background-color: red;
            }
            /*2, 链接访问过之后的样式*/
            h4:visited {
                background-color: orange;
            }
            /*3, 光标移动到元素上时的样式*/
            h4:hover {
                background-color: green;
            }
            /*4, 光标点击元素时的样式*/
            h4:active {
                background-color: blue;
            }

 

选择器总结:

一,基本选择器

1.通配符选择器:查找的是页面中所有的标签

2.E标签名选择器:查找的是页面中所有的E标签

3..sel类选择器:查找的是页面中所有的class值为sel的标签

4.#sel id选择器:查找的是页面中所有的id值为self的标签

5.群组选择器:查找的是页面中所有的通过群组中对应选择器能够找到的标签

 

二,层次选择器

1.S1 S2后代选择器:查找的是S1内部所有的S2标签

2.S1>S2父子选择器:查找的是S1内部第一级子元素为S2的标签

3.S1+S2相邻兄弟选择器:查找到的是与S1紧挨着兄弟S2标签

三,伪类选择器

1.link链接没有访问过时的样式

2.visited链接访问过之后时的样式

3.hover光标移动到元素上时的样式

4.active点击元素时的样式

 

注意:如果想要在a标签上同时看到以上四种样式,需要按照先爱(love)后恨(hate)的原则书写 这四个伪类选择器,另外,hover和active是所有的标签都存在的,link和visited只有a标签(链接标签)才拥有.