ホームページ  >  記事  >  バックエンド開発  >  CSSセレクターとは何ですか? CSSセレクターの優先順位決定

CSSセレクターとは何ですか? CSSセレクターの優先順位決定

php是最好的语言
php是最好的语言オリジナル
2018-07-28 10:58:342046ブラウズ

セレクターは CSS が作用するタグを指定し、そのタグの名前がセレクターです。意味: どのコンテナを選択するか (ラベル自体がデータをカプセル化するコンテナです)。

CSSセレクターとは何ですか? CSSセレクターの優先順位決定

CSSセレクターとは何ですか? CSSセレクターの優先順位決定

CSSセレクターとは何ですか? CSSセレクターの優先順位決定

@CHARSET "UTF-8";
          /*css中选择器有很多种,第一种就是最基本的元素选择器(又称类型选择器)。
           *文档的元素就是最基本的选择器。
           *如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,
           *   比如 p、h1、em、a,甚至可以是 html 本身:
           */
         h2{
           color:blue;
         }
         
         /*第二种选择器: 类样式选择器 */
          /*对所有 "aa"类样式进行设置
	     .aa{
	       background-color: #00FF00;
	     }
	     */
	     
	     /*仅仅是对p中的"aa"类样式进行设置*/
	     p.aa{
	       background-color: #00FF00;
	     }
	     .bb{
	        background-color: #004444; 
	     }
	     
	     /*第三种选择器 id选择器 
	      *ID 选择器允许以一种独立于文档元素的方式来指定样式。
          *在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。
	      */
	     
	     /*id选择器*/
	     #d1{
	        background-color: #0000FF;
	     }
	     
	     
	     /*其他选择器*/
	     
	    /*1.关联选择器*/
	      p span{/*选择p标签容器中的span*/
	        font-size:20pt;
	      }
	      
	    /*2.组合选择器*/
	    p span,.c,#d1{
	      color:red;
	    }
	    
	    /*3.伪元素选择器*/
	   /*CSS 伪元素用于向某些选择器设置特殊效果。*/
	    span:HOVER {
	          background-color:#FFFF00;
	          font-size: 20pt;
	          cursor: pointer;
		   }
		   
	      a{
		     text-decoration: none;
		   }
		   
	       /*L-V-H-A*/
	        a:link{
		      color: red;
		      font-size: 12pt;
		   }
		   a:visited{
		     color:blue;
		     font-size: 16pt;
		   }
		   a:hover{
		     background-color: #00FF00;
		     font-size:20pt;
		   }
		   a:active{
		     color:#FFFF00;
		   }
		   
		    input:focus{
		     background-color: #00FFFF;
		   }
		   
		   /*星号选择器,选择所有*/
		   *{
		     text-decoration: underline;
		   }
		   
		   /*属性选择器,所有具有type属性的元素*/
		   [type]{
		      margin: 10px;
		   }
		   /*具有name属性且属性值为'math'*/
		   [name="math"]{
		      background-color: #0ff;
		   }
		   
		   a[href="http://www.w3school.com.cn/"][title="W3School"] {
		      color: red;
		   }
		   
		   /* 关联选择器---后代 */
		   h1 em{
		       color: red;
		   }
		   
		   /*子元素选择器---儿子*/
		   p > em{
		      color: blue;
		   }
		   
		   /*相邻元素选择器---后续兄弟*/
		   li + li {
		     font-weight:bold;
		   }		

関連記事:

css クラス セレクターと ID selector

CSS セレクターの並べ替え

関連ビデオ:

クラス セレクター - 2016 新コース システム html css ビデオ

以上がCSSセレクターとは何ですか? CSSセレクターの優先順位決定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。