溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
屬性
通過屬性的復雜疊加才能做出漂亮的網頁
選擇器
通過選擇器找到對應的標簽設置樣式
選擇器的作用
選擇對應的標簽，為之添加樣式
標簽選擇器
根據標簽名找到標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
/*標簽選擇器*/
div{
color: red;
}
p{
color: greenyellow;
}
</style>
</head>
<body>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
</body>
</html>代碼：這是普通的頁內樣式； 注意style中的注釋方式不一樣。
上圖：
可以看到業內樣式設計成功； 那怎么將其中部分內容單獨進行設計呢，使用行內樣式的確可以做到，但是body中一般都是做內容和結構，所以盡量不要使用行內設計。
所以我們可以通過類選擇器來設計，為某個或多個內容進行類命名，然后針對命名的類進行設計。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
/*標簽選擇器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*類選擇器*/
.test1{
color: blue;
}
</style>
</head>
<body>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
</body>
</html>代碼↓
在body中為兩個內容進行類命名為 test1；
通過點“.”+類選擇器名稱，對類命名為test1的內容進行設計。
上圖：可以看到類選擇器的設計為藍色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
/*標簽選擇器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*類選擇器*/
.test1{
color: blue;
}
/*id選擇器*/
#main{
font-size: 60px;
}
</style>
</head>
<body>
<div id="main">22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
</body>
</html>代碼↓：
在body中，在內容中使用 id="" 來定義id，這個id是唯一的，不可重復，否則會報錯；不過在html中多個內容使用同一個id也是可以成功的，這是因為html是弱類型語言，在JS中就會報錯。
在style中使用#main{} 來設計該id的樣式
p , #main{
border: 4px dashed green;
}代碼↓：
在style中加入上面的代碼； 表示或p或#main的標簽都會被設計；
可以放多種標簽進行同時設計
復合選擇器就是與的關系。
不管放了幾個標簽，都必須同時符合才會生效設計內容。
/*復合選擇器*/
p.test1{
font-size: 66px;
}
div#main{
font-size: 10px;
}代碼：新增上面的代碼； 設計了兩個復合選擇器； 每個復合選擇器的兩個條件都必須同時滿足，注意復合標簽之間不能有空格。
上圖：可以看到同時滿足兩個復合條件的標簽的字體大小改變了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
/*標簽選擇器*/
div{
color: red;
}
p{
color: greenyellow;
}
/*類選擇器*/
.test1{
color: blue;
}
/*id選擇器*/
#main{
font-size: 60px;
}
/*并列選擇器*/
p , #main{
border: 4px dashed green;
}
/*復合選擇器*/
p.test1{
font-size: 66px;
}
div#main{
font-size: 10px;
}
/*后代選擇器*/
div .test3 a{
font-size: 66px;
}
</style>
</head>
<body>
<div id="main">22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div>22222222222</div>
<div class="test1">22222222222</div>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p>1111111111111111</p>
<p class="test1">1111111111111111</p>
<div id="test2">
<p class="test3">
<a href="#">我是超鏈接</a>
</p>
</div>
</body>
</html>代碼↓：
body下面增加了部分內容；
style中增加了后代選擇器設計，先滿足div標簽，div后面要滿足.test3標簽，test3后面要滿足a標簽；
/*后代選擇器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
div a{
font-size: 66px;
}代碼：如果把中間的某一個標簽去掉也是可以的，因為a也屬于div的后代。
/*后代選擇器*/
/*div .test3 a{*/
/* font-size: 66px;*/
/*}*/
/*div a{*/
/* font-size: 66px;*/
/*}*/
#test2 .test3 a{
font-size: 66px;
}
代碼：將最前面的標簽改成#test2 也是滿足條件的。
與后代選擇器效果差不多，但要求必須是緊挨著的下一級符合才可以，跳過匹配某個標簽的后代是不生效的。
上圖：
必須是div下面緊挨著的p標簽才會生效；
div下的span的p標簽是不生效的；
直接后代選擇器表達： div > p{}
上圖：倒數第2個p標簽與其上面的div標簽相鄰
上圖：匹配div標簽，且div中有名為name的屬性； 第1條和第2條會相匹配。
上圖：多屬性選擇器的匹配方法。 第二條匹配。
上圖：匹配div，名為name的屬性，且name屬性的值要是“jack”，滿足這三個條件才能匹配
其中常用的有focus和hover
/*偽類選擇器*/
input:focus{
width: 500px;
height: 60px;<input type="text" value="">上2代碼：body中添加input內容； style添加針對input:focus的設計；
上圖：默認沒有點擊的樣式
上圖：點擊后的樣式，就變成我們設計的樣子了，高度和寬度再點擊（聚焦）的時候就改變了。
input:focus{
width: 500px;
height: 60px;
/*調整邊框*/
outline: none;
border: 1px solid red;代碼：調整邊框，先將原來的邊框給去掉（outline: none），才能重新定義新的邊框。
上圖：如果不先去掉原來的邊框，新的border 樣式就不會生效。
/*id選擇器*/
#main{
font-size: 60px;
width: 500px;
height: 200px;
background: deepskyblue;
}代碼：修改id選擇器的設計樣式
上圖：當前修改后的樣式
#main:hover{
width: 100px;
height: 100px;
}代碼：在style中增加上面的代碼的樣式
上圖：將鼠標懸浮在上面的時候，可以看到邊框大小改變了。
#test4:first-letter{
font-size: 55px;
}<p id="test4">我是段落</p>上2代碼：
body增加一個段落，并且使用id選擇器；
style中增加first-letter偽元素
上圖：文本的第一個字母的樣式改變了
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
