css選取器及css優先順序

來源:互聯網
上載者:User

標籤:

三個css選取器:id選取器#test1{ }、class選取器.test2{ }、標籤選取器div{ }對三個div:<div>我是普通div</div>、<div id="test1">我是#test1</div>、<div class="test2">我是class</div>的影響,它們三個也是div標籤,所以div影響了三個的背景,用id說明針對哪個div發揮作用,比較精細,而類控制的多一些,div的範圍更大了,它影響這裡的三個選取器

id選取器、class選取器、標籤選取器、派生選取器div p{ }div下的p,衍生類別(根據元素之間的上下級關係);

<style>
#test1{
width:100;
height:100px;
border: 1px solid red;
}
.test2{
width:100px;
height:100px;
border: 1px solid blue;
}
div{
width:100px;
height:100px;
background: pink;
margin:10px;
}
div p{
color:blue;
}
</style>
</head>

<body>
<div>我是普通div
<p>我是div下的p標籤</p>
</div>
<p>我是獨立p標籤</p>
<div id="test1">我是#test1</div>
<div class="test2">我是class</div>
</body>

css優先順序:多個選取器同時控制某個元素,而且設定了同一個css屬性,控制的越精細優先順序越高;

<style>
p{
color:red;
}
.test2{
color:bule;
}
#test1{
color:green;
}
div #test1{
color:pink;
}
</style>
</head>

<body>
<div>
<p id="test1" class="test2">css選取器</p>
</div>
</body>

css選取器及css優先順序

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.