下文笔者讲述CSS语法中最重要的一个东西CSS选择器,如下所示
CSS选择器的简介及功能
CSS选择器简介:
我们将CSS语法用于匹配html元素的对象称之为“CSS选择器”
CSS选择器的功能
用于匹配网页上的元素，然后借助大括号中的属性值
对匹配上的元素进行属性设置,达到美化网页的目的
CSS选择器的分类
通用选择器
元素类型选择器
ID选择器
Class选择器
后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器
分组选择器
下文笔者将依次讲述各种选择器的示例分享,如下所示
通用选择器
通用选择器:
指用*星号作为匹配值
她会和页面上的每个单个元素匹配
此选择器通常写在CSS样式表的第一行,用于初始化样式信息
如:margin,padding属性
通用选择器注意事项:
由于她会匹配所有元素,浏览器渲染时,会消耗大量的CPU
笔者不建议使用通用匹配器
例:常见的通用选择器的示例
* {
margin: 0;
padding: 0;
}
*选择器内的样式规则将应用于文档中的每个元素。
元素类型选择器
元素类型选择器:
将文档中元素的每个示例与相应的元素类型名称进行匹配
例:所有p标签都设置为red
h1{
color: red;
}
ID选择器
id选择器:
用于为单个或唯一元素定义样式规则
ID选择器的定义是一个井号(#)后跟ID值
例
#bg {
color: red;
}
class类选择器
类选择器:
可用于选择具有class属性的任何HTML元素
类选择器的定义方式:
使用一个(.)跟class名称
html标签中使用class属性值和class名称匹配后即可进行相应的样式渲染
例
.red {
color:red;
}
例2
p.red {
color:red;
}
将html标签p中的class等于red的标签设置字体颜色为红色
后代选择器
当需要选择一个元素是另一个元素的后代时
可以使用这些选择器
如:
如果您只想定位无序列表中包含的那些定位点
而不要定位所有定位点元素
例
ul.menu li a {
text-decoration: none;
color:red;
}
h1 em {
color: green;
}
选择器内的样式规则ul.menu li a
只适用于<a>包含在具有class 的无序列表内的那些即锚元素.menu
对文档内的其他链接没有影响
h1 em选择器内的样式规则仅适用于<em>heading内包含的元素<h1>。
子选择器
子选择器:
用于选择作为某些元素的直接子元素的那些元素
子选择器由两个或多个选择器组成
两个选择器之间用大于号(即>)隔开
如:
您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级
例
ul > li {
list-style: square;
}
ul > li ol {
list-style: none;
}
选择器内的样式规则ul > li仅适用于<li>作为<ul>元素直接子元素的那些元素
且对其他列表元素没有影响
相邻兄弟选择器
相邻的同级选择器可用于选择同级元素
例
h1 + p {
color: red;
font-size: 16px;
}
h1 + p选择器:
<p>仅在<h1>和<p>元素在文档树中共享同一父级并且<h1>紧接在该<p>元素之前的情况下才选择元素,并为其设置样式
通用兄弟选择器
通用的同级选择器由两个简单的选择器组成，这些选择器由波浪号（∼）字符分隔
例
h1 ∼ p {
color: red;
font-size: 12px;
}
选择器h1 ∼ p将选择该<p>元素之前的<h1>所有元素，其中所有元素在文档树中共享相同的父元素
分组选择器
一次为多个选择器设置统一样式
分组选择之间使用逗号分隔
例
h1 {
font-size: 26px;
color:red;
}
h2 {
font-size: 18px;
color:red;
}
h3 {
font-size: 12px;
color:red;
}
可改写为以下形式
h1, h2, h3 {color:red;}
h1 {font-size: 26px;}
h2 {font-size: 18px;}
h3 {font-size: 12px;}