《頭號玩家》AI電影調研報告(四)
阿新 • • 發佈:2022-03-26
目錄
2.ID選擇器,
3.類選擇器,Class,
6.CSS3,偽類選擇器,
CSS選擇器
百度詞條為:"要使用css對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器,HTML頁面中的元素就是通過CSS選擇器進行控制的。"
1.星號選擇器、通用選擇器
<!--選中全部元素-->
*{
width:100%;
height:100%;
}
2.ID選擇器,#
<style> <!--#表示--> #name{ width:100px; height:100px; } </style> <body> <div id="name"></div> </body>
3.類選擇器,Class,.
<style>
.name{
}
</style>
4.後代選擇器
<style>
<!--父元素裡面的子元素,空格隔開-->
#box .box-div{
width:50px;
}
</style>
<body>
<div id="box">
<div class="box-div"></div>
<div class="box-div"></div>
</div>
</body>
5.子選擇器
子選擇器與後臺選擇器
區別:子選擇器使用>
,且只作用於子元素的第一個後代
後代使用空格,作用於所有子的後代元素
<style>
<!--只作用於第一個子元素-->
#box > .box-div{
width:50px;
}
</style>
<body>
<div id="box">
<div class="box-div"></div>
<div class="box-div"></div>
</div>
</body>
6.CSS3,偽類選擇器,:
冒號
<style>
a:link{}
a:visited{}
a:hover{}
</style>
7.群組選擇器
共同使用一類樣式,使用,
逗號隔開,表示多個
<style>
p,span{}
div,.box{}
</style>
8.相鄰選擇器
使用+
號表示相鄰的兄弟元素
<style>
<!--定位第一個段落p元素-->
h1 + p{}
</style>
<body>
<h1>十五</h1>
<p>我們很好</p>
<p>hello</p>
</body>
9.屬性選擇器
p[title]{}
p[att=val]{}匹配att屬性等於val的p元素
10.偽元素
E:first-line 匹配E元素的第一行
E:fitst-letter 匹配E元素的第一個字母
E:before 在E元素之前插入生成的內容
E:after 在E元素之後插入生成的內容