css 选择器

浅浅的花香味﹌ 2021-07-24 20:43 508阅读 0赞

快捷键
    ul>li*3>a 加tab键
    声明一个三个子标签每个子标签包含一个a标签的列表
    
    标签选择器:
     		标签名{
     			样式1：样式值1;
     			样式2：样式值2；
     		}
    
    id选择器
    对指定id的标签进行选择修改样式
    	#id名称{
    		
    	}
    		
    		#t1{
    			background-color:gray;
    		}
    		<table id="t1">
    		</table>
    		
    类选择器
    不同种类标签用相同样式
    	.common{
    		样式:样式值
    	}
    		
    全部选择器
    选择所有的html标签，并添加相同的样式
    	*{样式:样式值}
    	
    	
    组合选择器
    不同选择器直接有相同的样式
    	选择器1，选择器2{
    		样式：样式值
    	}
    
    
    后代标签选择器
    	对多个标签内的子标签内的相同标签进行样式修改
    	标签1 子标签2
    	{
    		样式：样式值域
    	}
    		如  将所有标签p内的a标签内容显示尾黑色
    			p a{
    				color:red;
    			}
    
    	对多个相同标签内的子标签单独进行样式修改
    		如只对第一个p标签内的子标签修改样式
    			#p1 a{
    				color:yellow;
    			}
    			
    			<p id="p1">
    				<a href="">nba</a>
    			</p>
    			<p>
    				<a href="">nba</a>
    			</p>
    	
    			
    子代标签选择器(对孙子代不起作用)
    div>li{
    }    只对div的下一级li标签起作用，对孙子标签中的li不起作用
    
    
    属性选择器
    对指定属性的标签进行样式修改
    	标签名[属性名=属性值]{
    		样式：样式值
    	}
    		input[type=text]{
    			color:red;
    		}
    		
    状态选择器
    	标签名:checked{样式}
    	如多选框
    		input:checked{
    			当被选中时才加载该样式
    		}
    	
    选择器优先级：
    id选择器>属性选择器>标签选择器>类选择器>全部选择器
    
    紧邻兄弟选择器
    p+span{
    }       只对p之后的第一个span起作用
    
    平级兄弟选择器
    p~span{
    }		对p之后的所有与p同级的span标签起作用
    
    指定类属性选择器
    标签名.类名{
    }     对选择的标签中，具有指定类名的标签起作用(div的class='big';  div.big{})
    
    同时包含属性选择器
    .class1.class2    //选择同时包含两个class属性的元素

**属性选择器补充图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

E[xx|="val"]   表示以val开头，且具有-符号作为连接符的元素

**代码示例：**

<html>
    	<head>
    		<title>css 选择器</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    		<style type="text/css">
    			/*标签选择器*/
    			table{ 
    				width:300px;
    				height:200px;
    				border: solid 1px;   /*给table加边框，不包含表格*/
    				background-color: red;
    
    			}
    			/*id选择器*/
    			#t1{ 
    				background-color:gray;
    			}
    			/*类选择器*/
    			.common{ 
    				color:red
    			}
    			/*组合选择器*/
    			.common,table{ 
    				background-color:blue;
    			}
    			/*子标签选择器*/
    			#p1 a{ 
    				color:yellow;
    			}
    			/*属性选择器*/
    			input[type=text]{ 
    				color:red;
    			}
    		</style>
    	</head>
    	<body>
    		<h3 align="center">css 选择器</h3>
    		<hr size="30" color="aquamarine"/>
    		<table id="t1" class="common">
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>1</td>
    			</tr>
    		</table>
    		<table>
    			<tr>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    			<tr>
    				<td></td>
    				<td></td>
    				<td></td>
    			</tr>
    		</table>
    		<b class="common">css 学习</b>
    		<hr size="30" color="aquamarine"/>
    			
    		<p id="p1">
    			<a href="">nba</a>
    		</p>
    		<p>
    			<a href="">nba</a>
    		</p>
    		<hr size="30" color="aquamarine">
    		<input type="text" name="t1" /> <br />
    		<input type="password" name="pwd" />
    		
    		
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/52ff6343b7c3446bb841de0396df4a0d.png