选择器问题
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题
想全部继承父元素属性,但是由于浏览器太多而无法全部理解继承采用如下方法
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
想有自己的性格,不想全部继承如下方法
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
参考网址:https://www.w3school.com.cn/css/css_syntax_pro.asp
选择器的分类
1.派生选择器
**通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。**只在某个标签内部生效而非全部标签,所以要考虑上下文。
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
参考网址:https://www.w3school.com.cn/css/css_syntax_descendant_selector.asp
2.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
一个选择器,多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次(一个人只有一个身份证号,但是这个身份证可以办很多手机号):
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。
参考网址:https://www.w3school.com.cn/css/css_syntax_id_selector.asp
3.类选择器
在 CSS 中,类选择器以一个点号显示:
.center {
text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
参考网址:https://www.w3school.com.cn/css/css_syntax_class_selector.asp
4.属性选择器
[title]
{
color:red;
}
参考网址:https://www.w3school.com.cn/css/css_syntax_attribute_selector.asp