HTML基础笔记之-CSS的选择器

最新推荐文章于 2021-06-04 15:03:38 发布

bruce_suxin

最新推荐文章于 2021-06-04 15:03:38 发布

阅读量295

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： UI界面设计 HTML常用标签 HTML HTML5 前端设计

本文链接：https://blog.csdn.net/bruce_suxin/article/details/52937443

版权

HTML+CSS+JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!doctype html><!--声明兼容所有浏览器的-->
<html>
    <head>
	    <meta http-equiv="Content-Type" content="text/html;charset=GBK">
		 <style type="text/css">
			div{
			    background-color:gray;
				color:white;
			  
			}
		 </style>
	    css基本选择器(三种)<br />
		  **要对那个标签里面的数据进行操作<br />
		    （1）标签选择器<br />
		      *使用标签名作为选择器的名称<br />
			<pre>
		 	 div{
			        background-color:gray;
			     	color:white;
		 	}
		 	</pre>
		
		class选择器<br />
              
 </style>
	</head>   
 <body>   
	 <h1> </h1>
	 
	</body>
</html>

CSS选择器的优先级

<!DOCTYPE html>
 <html>
   <head>
      <title>HTML示例</title>
      <style type="text/css">
       /*  优先级的顺序 ：style>id>class>标签选择器   */
        .haha{
		 
		   background-color:green;
		 
		 }
	  

	     div{
		    background-color:red;
		 
		 }

		 #hehe{

		    background-color:orange;
		    
		 
		 }
      
		 
	  </style>
   </head>
    <body>
      <div class="haha" id="hehe" style=" background-color:gray;">jdasdhjkahkjhjskcnkj</div>
   </body>
</html>

<!doctype html><!--声明兼容所有浏览器的-->
<html>
    <head>
	   <meta http-equiv="Content-Type" content="text/html;charset=GBK">
	   <style type="text/css">
	          div{
			    background-color:red;
				color:white;
			   }  
	   
	   </style>
	 </head>   
 <body>   
     <p>后加载的优先级高，只要对那个进行修改那个就叫选择器</p><br/>
	 ***格式 选择器名称{属性名:属性值; 属性名:属性值;}
	 <h1>CSS的优先级</h1>
	 <div>CSS的优先级CSS的优先级CSS的优先级CSS的优先级1</div>

     <div style="background-color:black; color:white;">CSS的优先级CSS的优先级CSS的优先级CSS的优先级1</div>




	</body>
</html>

CSS扩展选择器

<!DOCTYPE html>
 <html>
   <head>
      <title>HTML示例</title>
      <style type="text/css">
	  div  p{    /*表示在div里面的p标签变化*/
		   background-color:green;
       }
	  
	  </style>
   </head>
    <body>
     <p>扩展选择器目前有三种</p><br/>
     (1)关联选择器<br/>
	     * <div><p></p></div><br/>
         *设置div标签里面p标签，嵌套标签里面的样式<br>

       例子：
	   
	    <div><p>CSS的扩展选择器</p></div>
        <p>wwwwwwwwwwwwwwwwwwwwwwww</p>
    </body>
</html>