css3第二篇，選擇器一(基本選擇器)
阿新 • • 發佈：2018-12-11
選擇器：實現css樣式的基本組成部分
基本選擇器
id選擇器
與標籤一一對應
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #a1 { color: red; } </style> </head> <body> <!-- 選擇器:實現css樣式的基本組成部分 --> <!-- id選擇器 語法: css #選擇器名稱 {} 表示選擇器屬性內容 css屬性以及屬性值 html 標籤新增id屬性,屬性值為選擇器名稱 id:標籤的身份證,必須和標籤一一對應 --> <a href="#" id="a1">百度</a> </body> </html>
class選擇器/類選擇器
與標籤是多對多對應，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .a1 { color: orange; } .a2 { font-size: 100px; } </style> </head> <body> <!-- class選擇器/類選擇器 --> <!--語法: css .選擇器名稱 {} 屬性以及屬性值 html html標籤新增class屬性,屬性值為選擇器名稱 class與id選擇器的區別: 1,一個id選擇器只能給一個標籤使用 一個clas選擇器可以給多個標籤使用 2,一個標籤只能有一個id選擇器 一個標籤可以有多個class選擇器 --> <a href="#" class="a1 a2">百度</a> </body> </html>
型別選擇器/html選擇器/標籤選擇器
對指定型別的標籤都起作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> strong { color: red; } </style> </head> <body> <!-- 型別選擇器/html選擇器/標籤選擇器 --> <!--語法: css 選擇器名稱是HTML中的標籤名稱 html 不用新增特殊內容 作用: 對指定的所有HTML標籤,起css樣式作用 --> <strong>北京</strong> <strong>北京</strong> <strong>北京</strong> <strong>北京</strong> </body> </html>
* 通配選擇器
對HTML檔案中的所有標籤都起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
color: green;
}
</style>
</head>
<body>
<!-- 通配選擇器 -->
<!-- 語法:
css * 作為選擇器名稱
html 不用新增特殊內容
作用:html頁面中所有的標籤,都會受到選擇器樣式效果影響
-->
<a href="#">百度</a>
<strong>上海</strong>
<h1>重慶</h1>
<em>廣州</em>
<del>天津</del>
</body>
</html>