1.元素选择器:
通过元素的名称来选择元素。例如,选择所有段落元素可以使用 p。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> >类选择器示例/title>
< style>
p {
color : blue;
}
</ style>
</ head>
< body>
< p> 这 is 个 p</ p>
< div>
< p> 这 is 个 p</ p>
</ div>
</ body>
</ html>
2.类选择器:
通过元素的类名来选择元素。类选择器以点号(.)开头,后面跟着类名。例如,选择所有类为 “example” 的元素可以使用 .example。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 类选择器示例</ title>
< style>
.example {
font-weight : bold;
}
</ style>
</ head>
< body>
< p class = " example" > 这里有个 "example"</ p>
< p> 这里有个 "example"</ p>
</ body>
</ html>
3.ID选择器:
通过元素的ID属性来选择元素。ID选择器以井号(#)开头,后面跟着ID名称。例如,选择ID为 “header” 的元素可以使用 #header。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> ID 选择器示例</ title>
< style>
#header {
background-color : lightgray;
}
</ style>
</ head>
< body>
< div id = " header" >
< h1> ID 选择器!</ h1>
</ div>
< div>
< p> ID 选择器</ p>
</ div>
</ body>
</ html>
4.后代选择器:
选择某个元素的后代元素。后代选择器使用空格分隔元素。例如,选择所有段落元素中的强调元素可以使用 p em。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 后代选择器示例</ title>
< style>
div p {
color : green;
}
</ style>
</ head>
< body>
< div>
< p> This 后代选择器示例</ p>
</ div>
< p> This 后代选择器示例</ p>
</ body>
</ html>
5.子元素选择器:
选择某个元素的直接子元素。子元素选择器使用大于号(>)分隔父元素和子元素。例如,选择所有列表中的直接子元素可以使用 ul > li。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 子元素选择器</ title>
< style>
ul > li {
color : red;
}
</ style>
</ head>
< body>
< ul>
< li> Item 1</ li>
< li> Item 2</ li>
</ ul>
< div>
< li> This is 子元素选择器</ li>
</ div>
</ body>
</ html>
6.相邻兄弟选择器:
选择某个元素的紧接在其后的同级兄弟元素。相邻兄弟选择器使用加号(+)符号。例如,选择所有段落元素之后紧跟的标题元素可以使用 p + h2。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 相邻兄弟选择器</ title>
< style>
h2 + p {
font-style : italic;
}
</ style>
</ head>
< body>
< h2> 鹅鹅鹅</ h2>
< p> 曲项向天歌</ p>
< div>
< h2> 鹅鹅鹅</ h2>
< p> 白毛浮绿水,红掌拨清波。</ p>
</ div>
</ body>
</ html>
7.通用选择器:
选择所有元素。通用选择器使用星号(*)。例如,选择文档中所有元素可以使用 *
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 通用选择器</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
</ head>
< body>
< div>
< p> 先天下之忧而忧,后天下之乐而乐</ p>
</ div>
< ul>
< li> Item 1</ li>
< li> Item 2</ li>
</ ul>
</ body>
</ html>
8.属性选择器:
选择具有指定属性的元素。属性选择器包括有属性值(例如[attribute])或者属性值为特定值(例如[attribute=value])。例如,选择所有带有 href 属性的链接可以使用 a[href]。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 属性选择器</ title>
< style>
a[target="_blank"] {
color : blue;
}
</ style>
</ head>
< body>
< a href = " https://example.com" target = " _blank" > 点点点</ a>
< a href = " https://example.org" > 点点点</ a>
</ body>
</ html>
9.伪类选择器:
选择元素的特定状态或位置,如悬停、访问、焦点、第一个子元素等。伪类选择器以冒号(:)开头。例如,选择所有链接的悬停状态可以使用 a:hover。
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 伪类选择器</ title>
< style>
a:hover {
text-decoration : underline;
}
</ style>
</ head>
< body>
< a href = " #" > 把鼠标悬停在这里有惊喜!!!</ a>
</ body>
</ html>