>  기사  >  백엔드 개발  >  CSS 선택자란 무엇입니까? CSS 선택기 우선순위 결정

CSS 선택자란 무엇입니까? CSS 선택기 우선순위 결정

php是最好的语言
php是最好的语言원래의
2018-07-28 10:58:341982검색

선택자는 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 선택기

CSS 선택기 구성

관련 동영상:

Class Selector-2016 새로운 교육과정 시스템 HTML+CSS 동영상

위 내용은 CSS 선택자란 무엇입니까? CSS 선택기 우선순위 결정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.