前端学习笔记(CSS)——选择器

小鱼儿 2022-03-10 09:47 228阅读 0赞

> 由于老师上课讲道的几种选择器都写在一个.html文件里了，显得和乱，我也只是把它简单的分隔开，仅供个人学习。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>选择器</title>
    	<style tyle="text/css"> /* 1、基础选择器 */ /*1) 标签选择器 书写格式：标签名{} 书写方式：根据标签名，选中页面上所有符合的元素 */ div{ width:100px; height:200px; background-color: green; } /*2）id选择器 书写格式:#id值{} 选择方式：根据标签的id属性的值，来选中某个标签*/ #box2{ width:200px; height:300px; background-color: red; } /*3) 类别选择器 书写格式：.class值{} 选择方式：根据标签的class属性的值，来选中一类标签*/ .cls { color: blue; } /*4) 属性选择器 书写格式：[某属性=某值\某个值的匹配]{} 选择方式：根据[]里指定的属性和他对应的值的匹配方式来选中 匹配方式：->[title ^= "m"] 匹配所有以m开头的标签 ->[title $= "s"] 匹配所有以s开头的标签 ->[title ~= "m"] 匹配所有包含m的标签 */ [name="hello"]{ color: purple; } [title="我是标题"]{ color:green; } /*5) 通用选择器 书写格式：*{} 选择方式：选择页面上所有的标签元素 */ * { border:1px solid black; } </style>
    </head>
    <body>
    	<div class="cls"></div>
    	<div id="box2"></div>
    
    	<h1 title="我是标题">标题1</h2>
    	<h2 name="hello">你好</h2>
    </body>
    </html>

> ### 网页显示如下 ###
> 
> ###### 【注意】：之所以`标题1`和`你好`有border，是因为通用选择器会将所有的标签元素加上边框，如果在div中写入一些字，那么这些字也会显示border ######
> 
> ###### 【注意】优先级:id>class=属性>标签>\* ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NjAyNQ_size_16_color_FFFFFF_t_70][] ######

--------------------

/*2、伪类选择器 某选择器：某动作{} 选择方式：通过某选择器的一些标签， 这些标签设置样式表在某种动作发生的时候生效， 种类：visited->链接访问后 link->链接使用前 hover->鼠标悬停时 active->鼠标点击时*/	
    		#box2{ 
    			width:200px;
    			height:300px;
    			background-color: red;
    		}
    		#box2:hover{ 
    			background-color: yellow;
    		}
    		a:visited{ 
    			background-color: blue;
    		}
    		a:link{ 
    			background-color: purple;
    		}
    		a:hover{ 
    			background-color: red;
    		}
    		a:active{ 
    			background-color: yellow;

> ###   鼠标未悬停到图片上                       鼠标悬停在图片上 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NjAyNQ_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20190310161505331.png]

--------------------

/*3、组合选择器 书写规则：选择器1选择器2选择器3...{}其中如果某个选择器时标签选择器要写最前面*/
    		div.cls{ 
    			border: 5px solid ;
    		}
    		/*4、派生选择器 1)后代选择器 书写规则：selector1 selector2 selector3...{} 选择方式：首先根据selector1选择一批元素，然后从这批元素的后代元素中selector2选一批元素.... 2)子选择器 书写规则：selector1 > selector2 >selector3..{} 选择方式：首先根据selector1选择一批元素，然后从这批元素的子元素中selector2选一批元素....*/
    		div>p{ 
    			background-color: yellow;
    		} 
    
    		/*5、伪类派生选择器 书写规则->选择器1:某动作 选择器2{} 选择方式：动作家在选择器1上，样式加载选择器2上*/
    		#box3:hover p{ 
    			background-color: blue;
    			 width:300px; 
    		}

### 网页显示如下： ###

> 鼠标未悬停在黄色区域  
> ![在这里插入图片描述][20190310163913966.png]  
> 鼠标悬停在黄色区域  
> ![在这里插入图片描述][20190310164007275.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NjAyNQ_size_16_color_FFFFFF_t_70]: /images/20220310/4e5ca96e2e4a4c7b847fb43e0105fc52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NjAyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190310161406737.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NjAyNQ==,size_16,color_FFFFFF,t_70
[20190310161505331.png]: /images/20220310/e1b0bca57aba4eb4ab1b432ab9e8d135.png
[20190310163913966.png]: /images/20220310/0389cfb01610444fa7530ff78ae66725.png
[20190310164007275.png]: /images/20220310/6da1686b1eaa42feb28aae69867983ef.png