CSS基本选择器
阅读 (624)要想为指定的HTML元素添加CSS样式,首先需要选中该元素。在CSS中,执行这一选择操作规则部分被称为选择器(选择符)。
CSS基本选择器可以分为五类:标签选择器、id选择器、类选择器、通配符选择器和伪类选择器。
一、标签选择器
-
说明
标签选择器是指用HTML标签名称作为选择器,匹配对应的HTML的标签,按标签名称分类并为页面中某一类标签指定统一的CSS样式(如 body、div、p、img、strong、span等)。
可以说,所有的页面元素都可以作为选择符。
-
语法
标签名{属性1:属性值1; 属性2:属性值2; } /*所有的div内文字显示成红色 */ div{ color:red; }
-
特点
优点:能快速为页面中同类型的标签统一样式
缺点:不能设计差异化样式
-
用法
- 如果想改变某个元素的默认样式时,可以使用类型选择符(如:改变a链接的默认样式)
- 当统一文档某个元素的显示效果时,可以使用类型选择符(如:改变文档所有p段落样式)
二、id选择器
-
说明
在一个 HTML页面中,Id 选择器仅可一次,不能重复,不允许有相同名字的id对象出现。好比人的身份证号是唯一的,它的选择结果也是唯一的。
-
语法
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器使用“#”进行标识,后面紧跟id名。
-
使用
-
先为一个元素定义id属性, 如:
-
添加样式
#box{width:300px; height:300px;}
-
起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)
-
最大的用处:创建网页的外围结构(在后面页面布局为大家详细讲解)
-
三、类选择器
-
说明
类选择器(class)给拥有指定的class名的元素设置样式。 好比人的名字, 可以多次重复使用的。
-
语法
.class名{属性:属性值;}
当使用类选择符时,应先为元素定义一个类名称,例:
<div class="top"></div>
-
举例
<head>
<meta charset="utf-8">
<style>
span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
-
类名称规范
-
长名称或词组可以使用"-"中横线来为选择器命名。
-
不建议使用“_”下划线来命名CSS选择器。
-
不要纯数字、中文等命名, 尽量使用英文字母来表示。
-
四、多类名选择器
可以给单个标签添加多个类名,既可以提升类样式的复用性,也可以达到添加多种样式的效果。在后面复杂网页的布局中使用较多。
- 举例
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
-
注意
-
各个类名中间用空格隔开。
-
样式显示效果跟HTML元素中的类名先后顺序没有关系,跟 CSS样式书写的上下顺序有关。
-
五、通配符选择器
通配器选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
-
语法
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
应用
常用来重置样式,清除所有HTML标签的默认内、外边距。
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
-
注意
六、伪类选择器
-
说明
伪类选择器用于向某些选择器添加特殊的效果,如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
-
类选择器和伪类选择器的区别
类选择器是一个点 .demo {} 而伪类是用两个点,即冒号 :link{}
链接伪类选择器
-
说明
链接伪类选择器用于给超链接标签添加特殊的效果。
-
语法
a:link {color: red;} /* 未访问的链接状态 */ a:visited {color: green;} /* 已访问的链接状态 */ a:hover {color: blue;} /* 鼠标滑过链接状态 */ a:active {color: yellow;} /* 鼠标按下去时的状态 */
-
注意
-
当这4个超链接伪类选择器联合使用时,应注意书写顺序,正常顺序为: a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效(lv ha)。
-
为了简化代码,可以把伪类选择器中相同的声明提出来放在a选择符中; 例如:a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同,只有鼠标划过变化颜色。
-
结构(位置)伪类选择器(CSS3)
常用的结构伪类选择器:
-
E:first-child
选择器表示选择父元素中的第一个子元素 E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
举例:
ol > li:first-child{ color: red; }
-
:last-child
选择器选择的是元素的最后一个子元素。比如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。
举例:
ol > li:last-child{ color: red; }
-
:nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,不仅可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。
举例:
ol li:nth-child(even){ background: orange; }
-
E:empty
选择器表示的就是空。用来选择没有任何内容的元素E,这里没有内容指的是一点内容都没有,哪怕是一个空格。
举例:
p{ background: orange; min-height: 30px; } p:empty { display: none; }
-
E:root
选择器从字面上我们就可以很清楚的理解是根选择器,它的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。
:root{ background:pink; } /*等同于*/ html {background:pink;}
目标伪类选择器(CSS3)
:target
选择器
可用于选取当前活动的目标元素,然后给它添加相应的样式。
<h2><a href="#brand">Brand</a></h2>
<div id="brand">
content for Brand
</div>
#brand:target {
background: orange;
color: #fff;
}