css选择器

来源：互联网发布：卡拉扬去世知乎编辑：程序博客网时间：2024/06/03 17:21

1.id选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.tou{color:red;}#big{color:pink;}/*id选择器和类选择器结合记忆更好*/</style></head><body><div id="big">熊大</div><div>熊二</div><div class="tou">光头强</div></body></html>

2.多类名选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.font20{font-size:20px;}.font14{font-size:14px;}.pink{color: pink;}.font-weight{font-weight: bold;}</style></head><body><div class="font20 pink" >亚瑟</div><div class="font20">刘备</div><div class="font14 pink" >安琪拉</div><div class="font14">貂蝉</div></body></html>

3.类选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.mingren{color: orange;}.zuozhu{color:red;}</style></head><body><div class="mingren">鸣人</div><div class="zuozhu">佐助</div><div>卡卡西</div></body></html>

4.标签选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p{color:pink;}div{color:purple;}/*p div h1 span em i 这是标签作为选择器 我们成为标签选择器*/</style></head><body><p>白展堂</p><p>吕秀才</p><p>李大嘴</p><div>鸣人</div><div>佐助</div><div>卡卡西</div></body></html>

5.结构伪类选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*li:first-child{ 选择第一个孩子color:pink;}li:last-child{ /选择最后一个孩子color:purple;}li:nth-child(4){  选择第4个孩子 n代表几个的意思color:skyblue;}li:nth-child(odd){ 可以选择所有的 odd奇数的孩子标签color:pink;}li:nth-child(even){  可以选择所有的 even偶数的孩子标签color:deeppink;}*/li:nth-child(2n){ /* n 2n 相当于公式（倍数，从0开始，3n是0 3 6 9）*/color:pink;}</style></head><body><ul><li>第一个孩子</li><li>第二个孩子</li><li>第三个孩子</li><li>第四个孩子</li><li>第五个孩子</li><li>第六个孩子</li></ul></body></html>

6.链接伪类选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a{    /*a 是标签选择器，所有的链接*/font-size: 16px;color :gray;font-weight: 700;}a:hover{  /*hover是链接选择器 鼠标移动到链接上*/color :red;  /*鼠标经过的时候由黑色变成了红色}*/</style></head><body><a herf="#" >秒杀</a></body></html>

7.伪类选择器

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a:link{   /*未访问过的*/font-size: 16px;color :gray;font-weight: 700;}a:visited{   /*已访问的链接 我们已经点击过的一次的状态*/font-size: 16px;color :orange;font-weight: 700;}a:hover{  /*鼠标移动到链接上*/font-size: 16px;color :red;font-weight: 700;}a:active{ /* 选定的链接，当我们点击别松开鼠标 显示的状态*/font-size: 16px;color :green;font-weight: 700;}</style></head><body>伪类选择器其中的链接伪类选择器  主要针对于  a<div> <a herf="#" >秒杀</a></div><div> <a herf="#" >闪购</a></div></body></html>

阅读全文

0 0