溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、CSS選擇器之標簽選擇器(元素選擇器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 標簽選擇器
* 作用：通過元素選擇器可以選擇頁面中的所有指定元素
* 語法：標簽名{}
*/
p{
background-color: yellow;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>舉頭望明月，</p>
<p>低頭思故鄉。</p>
</body>
</html>
二、CSS選擇器之id選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 標簽選擇器
* 作用：通過元素選擇器可以選擇頁面中的所有指定元素
* 語法：標簽名{}
*/
p{
background-color: yellow;
}
/**
* id選擇器
* 作用：通過元素的id屬性值來選擇唯一的元素
* 語法：#id屬性值{}
*/
#four{
background-color: aqua;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
三、CSS選擇器之類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 標簽選擇器
* 作用：通過元素選擇器可以選擇頁面中的所有指定元素
* 語法：標簽名{}
*/
p{
background-color: yellow;
}
/**
* id選擇器
* 作用：通過元素的id屬性值來選擇唯一的元素
* 語法：#id屬性值{}
*/
#four{
background-color: aqua;
}
/**
* 類選擇器i
* 作用:通過元素的class屬性值選中一組元素
* 語法：.class屬性值{}
*/
.multi{
background-color: antiquewhite;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<p class="multi">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="multi">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 標簽選擇器
* 作用：通過元素選擇器可以選擇頁面中的所有指定元素
* 語法：標簽名{}
*/
p{
background-color: yellow;
}
/**
* id選擇器
* 作用：通過元素的id屬性值來選擇唯一的元素
* 語法：#id屬性值{}
*/
#four{
background-color: aqua;
}
/**
* 類選擇器
* 作用:通過元素的class屬性值選中一組元素
* 語法：.class屬性值{}
*/
.multi{
background-color: antiquewhite;
}
.hello{
font-weight: bold;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<!--
時間：2016-12-04
描述：可以有多個選擇器作用于同一個元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="multi">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
四、CSS選擇器之分組選擇器(并集選擇器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 分組選擇器(并集選擇器)
* 作用：通過選擇器分組可以同時選中多個選擇器對應的元素
* 語法:選擇器1，選擇器2，選擇器3{}
*/
p,#four,.three{
background-color: aquamarine;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<!--
時間：2016-12-04
描述：可以有多個選擇器作用于同一個元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
五、CSS選擇器之通配選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 通配選擇器
* 選中頁面中的所有元素
* 語法：*{}
*/
*{
background-color: red;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<!--
時間：2016-12-04
描述：可以有多個選擇器作用于同一個元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
六、CSS選擇器之復合選擇器（交集選擇器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 復合選擇器（交集選擇器）
* 作用：可以選中同時滿足多個選擇器的元素
* 語法：選擇器1選擇器2選擇器3{}
*/
p.three{
background: yellow;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
/**
* 標簽選擇器
* 作用：通過元素選擇器可以選擇頁面中的所有指定元素
* 語法：標簽名{}
*/
p{
background-color: yellow;
}
/**
* id選擇器
* 作用：通過元素的id屬性值來選擇唯一的元素
* 語法：#id屬性值{}
*/
#four{
background-color: aqua;
}
/**
* 類選擇器
* 作用:通過元素的class屬性值選中一組元素
* 語法：.class屬性值{}
*/
.multi{
background-color: antiquewhite;
}
.hello{
font-weight: bold;
}
.three{
font-family: "楷體";
}
/**
* 分組選擇器(并集選擇器)
* 作用：通過選擇器分組可以同時選中多個選擇器對應的元素
* 語法:選擇器1，選擇器2，選擇器3{}
*/
p,#four,.three{
background-color: aquamarine;
}
/**
* 通配選擇器
* 選中頁面中的所有元素
* 語法：*{}
*/
*{
background-color: red;
}
/**
* 復合選擇器（交集選擇器）
* 作用：可以選中同時滿足多個選擇器的元素
* 語法：選擇器1選擇器2選擇器3{}
*/
p.three{
background: yellow;
}
</style>
</head>
<body>
<h2>靜夜思</h2>
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">舉頭望明月，</p>
<p id="four">低頭思故鄉。</p>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
