本文详细介绍了CSS的各种选择器，包括标签选择器、类选择器、ID选择器、通配选择器、复合选择器（如子选择器、相邻选择器和包含选择器）、多层选择器嵌套以及属性选择器（匹配属性名、值和模糊匹配）。这些选择器有助于精确控制网页元素的样式。
标签选择器
与网页元素同名的选择器。常用于与设置网页默认效果，或者统一常用元素的基本样式。
p{
font-size：10px；
}
类选择器
可以为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。以一个点（.）前缀开头，然后跟随一个自定义类名。
<p class='font_12'>12</p>
<p>13</p>
<p>14</p>
.font_12{font-size：18px}
与标签选择器组合限定类选择器的使用范围
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
p.mi{
font-size: 21px;
}
ID选择器
指标签在HTML文档中的唯一编号。只能定义一个对象的样式，以#号作为前缀，然后自定义一个ID名。
<p id="mili">相传嫦娥是天帝的侄女。她长得漂亮，天帝很喜欢她，她要什么，天帝就给她什么。她在天宫中过着优裕的生活。</p>
#mili{
color: red;
}
通配选择器
用来定义所有元素都需要的相同样式。
*{margin：0；
padding：0；}
复合选择器
子选择器
父元素所包含的子元素，使用>表示
<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
</body>
body>p{
width: 100px;
height: 20px;
background-color: aqua;
}
相邻选择器
通过相邻的兄弟元素来互相控制，就是指定一个元素相邻的下一个元素的样式。用+表示。
<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷灵药，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
</body>
div+p{
width: 100px;
height: 20px;
background-color: aqua;
}
包含选择器
通过空格标识符来表示包含框对象的选择器，而后面的选择器表示被包含的选择器。
<p class="mi">嫦娥应悔偷<span>灵药</span>，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
.mi span{
background-color: red;
}
多层选择器嵌套
CSS可以使用选择器嵌套来实现对HTML结构中纵深元素的控制。
<body>
<p class="mi">嫦娥应悔偷<span>灵药</span>，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
</body>
body p span{
background-color: blue;
}
属性选择器
属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。属性选择器一般是一个元素后面紧跟中括号，中括号内市是属性或属性表达式。
1.匹配属性名选择器
<body>
<div class="mi">李子奇</div>
<p class="mi">嫦娥应悔偷<span>灵药</span>，碧海青天夜夜心。”这是唐代诗人李商隐《嫦娥》诗中的两句。嫦娥奔月的故事，早在我国现代就遍及地流传着。</p>
<p id="mili">相传嫦娥是天帝的侄女。她长得漂亮，天帝很喜欢她，她要什么，天帝就给她什么。她在天宫中过着优裕的生活。</p>
</body>
p[class]{
}
2.匹配属性值选择器
<p id="mili">相传嫦娥是天帝的侄女。她长得漂亮，天帝很喜欢她，她要什么，天帝就给她什么。她在天宫中过着优裕的生活。</p>
<p id="liyi">后羿是天帝手下的一员大将，练就一身好武艺，射箭的技能很高，百步之外，百发百中。</p>
p[id="liyi"]{
}
3.模糊匹配属性值选择器
[|=]:连字符匹配，以连字符为分隔符，匹配属性值中局部字符串
[~=]：空白符匹配，以空白符为分隔符，匹配属性值中局部字符串
[^=]：前缀匹配，匹配属性值中的起始字符
[$=]：后缀匹配，匹配属性值中的结束字符
[*=]：字符串匹配，匹配属性值存在的指定字符
扫一扫
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
