1、类型选择器
用来寻找特定类型的元素，一般指css中被通俗定义并广泛应用的元素，如段落、标题、正文等
<也称为元素选择器或简单选择器>
p{font-size:16px;color:black;}
2、后代选择器
用来寻找特定元素或元素组的后代，中间以空格表示
body p{font-size:14px;}
3、ID选择器
用于寻找具有指定ID的元素，由字符#表示
#intro{font-weight:bold;}
<p id="intro">Hello World!</p>
4、类选择器
用于寻找具有指定类名的元素，由点号.表示
.date-posted{color:#ccc;}
<p class="date-posted">12/12/2012</p>
5、伪类选择器
对目标元素出现某种特殊的状态应用样式
常见的有: :link,:visited(链接伪类，只能应用于锚元素)
:hover,:active,:focus(动态伪类，理论上可应用于任何元素)
a:link{color:blue;text-decoration:none;}
a:visited{color:grey;}
a:hover,:active,:focus{color:red;}
6、通用选择器
匹配所有可用元素，由*表示
*{padding:0;margin:0;}
7、高级选择器
1）子选择器
只选择元素的直接后代，即子元素，定义符号是>
body>p{color:green;}
<body>
<p>这一段是绿的</p>
<div><p>这一段不是绿的</p></div>
<p>这一段是绿的</p>
</body>
2）相邻同胞选择器（相邻选择器）定位同一父元素下某个元素之后的元素，定义符号是+h2+p{color:red;}
<h2>红的？</h2><p>是红的</p><p>不是红的</p><h2>红的？</h2><div><p>不是红的</p></div><p>不是红的</p><h2>红的？</h2>不是红的<p>红的</p><p>不是红的</p>
3）属性选择器根据某个属性是否存在或属性的值来寻找元素，定义方式是将属性和值写在[]内a[name]{color:red;} /*选中具有name属性的a元素*/[special] /*选中具有special属性的任何元素*/img[alt="so"][class="pic"]{margin:20px;} /*同时匹配两个属性和值*/[special~="wo"]{color:red;}<h2 special="wo">文字是红色的</h2> /*具有special属性且值得字符中含有wo*/
时间： 2024-10-15 17:31:48