CSS基础4.1--选择器之CSS基础4.1-选择器之基本选择器

开发技术前端

字数统计: 1.3k阅读时长: 6 min

 2018/08/03  1

CSS通过选择器控制HTML元素，实现对网页对象一对一、多对一、一对多的匹配 CSS选择器在CSS2.1的基础上新增了属性选择器、伪类选择器、过滤选择器。减少了对HTML类名的或ID名的依赖，避免了对HTML结构的干扰。后续博客中会讲到。根据所或页面中元素的不同，可以将CSS选择器分为5大类：CSS基础4.1-选择器之基本选择器、组合选择器、伪类选择器、伪元素和属性选择器。其中，伪类选择器又分为6种：动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。

本篇将介绍基本CSS选择器：标签选择器、类选择器、ID选择器和通配选择器

标签选择器

标签选择器直接引用HTNL标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中默认的显示样式。它可以快速、方便地控制页面标签的默认显示效果。例：设置页面样式为：文字大小12像素，字体颜色为红色。（关于字体单位）

<style type="text.css">
p 
{
    font-size: 12px;
    color: red;
}
</style>

## 类选择器类选择器能为网页对象定义不同的样式，实现不同元素拥有自己想通的样式，相同元素的不同对象拥有不同的样式。类选择器以一个.前缀开头，随后跟一个自定义的类名。应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签重定义class属性，然后将其属性值设置为事先定义好的类名称即可。例1：用类样式设计段落文本效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p
{
	font-size: 12px;
	color: red;
}
.font18px {font-size: 18px;}      /*定义一个类选择器*/
</style>
</head>

<body>
<p>12像素字体，红色</p>
<p class=font18px>18像素字体，红色</p>   <!--适用于先定义的选择器-->
<p>12像素字体，红色</p>
</body>
</html>

预览效果图：

例2：在对象中应用多个样式类，因为class属性可以包含多个类，因此涉及复合样式类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
p
{
	font-size: 12px;
	color: red;
}
.font18px {font-size: 18px;}      /*字体大小类*/
.underline {text-decoration: underline}  /*下划线类*/
.italic {font-style: italic}    /*字体样式为斜体*/
</style>
</head>

<body>
<p class="underline">12像素字体，红色</p>
<p class="font18px underline itliac">18像素字体，红色</p>   <!--多个选择器-->
<p class="italic">12像素字体，红色</p>
</body>
</html>

效果预览：

ID选择器

ID选择器以#开头，然后是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定定义id属性，然后将概述性质设置为实现定义好的ID选择器的名称即可。例1：简单示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box 
{
	background:url(miku.jpg) center bottom;  /*定义背景图像居中，底部对齐*/
	height:700px;  /*固定盒子高度*/
	width:700px;  /*固定盒子宽度*/
	border:solid 2px red;    /*边框样式*/
	padding:100px; /*增加内边距*/
}
</style>
</head>

<body>
<div id="box">此处定义了一个盒子</div>

</body>
</html>

效果预览图：

通配选择器

如果所有HTML元素都使用一个样式的话，这时可以使用通配选择器，其格式是固定的，使用*来表示。

例：样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
	font-size: 18px;
	font-style: italic;
	color: blue;
}
</style>
</head>
<body>
<p>p标签</p>
<h2>h标签</h2>
</body>
</html>