CSS3选择器-基础选择器

是小鹿呀
174 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

第1关：CSS基础选择器相关概念

相关知识

通用选择器

通用选择器“ * ”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。 例如：

*{ 
	margin:0px;  
	padding:0px;
	border:0px 
}

标签选择器

指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式 。 例如：

p{ 
	font-famliy:黑体; 
	font-size:12px;  
	color:green; 
}

类选择器

用来为一系列的网页元素定义相同的显示样式。类选择器使用“.”进行标识，后面紧跟类名。

例如：

若设置 <p class=font01>您好</p>

则这个p标签设置的样式可写为：

.font01{color:green;}

ID选择器

用来为唯一的网页元素定义显示样式。ID选择器使用“#”进行标识，后面紧跟ID名。

例如：

若设置 <p id=green>您好</p>

则这个p标签设置的样式可写为：

#green{color:green;}

特别注意：

HTML和XHTML中，类名和ID名定义是区分大小写的！！

CSS样式的特殊性

当基础选择器的多个规则都应用在同一元素时，权重高的样式优先。 样式优先级从高到低分别是： id选择器、类选择器、标签选择器、通用选择器。 例如： 若设置 <p class=font1>CSS样式的特殊性</p> 当

.font1{Color:red}   
	p{color:blue}

p标签中的文本颜色显示为红色

通关知识

1、id选择器使用（D）进行标识，后面紧跟id名
A、^
B、*
C、.
D、#

2、类选择器使用（C）进行标识，后面紧跟class名。
A、^
B、*
C、.
D、#

3、CSS选择器的优先级从高到低分别为，通用选择器、标签选择器、类选择器、ID选择器。（B）
A、对
B、错

第2关：通用选择器

编程要求

请在右侧编辑器的Begin - End区域内使用通用选择器对文本进行样式设置，具体要求是：

  1. 先将文本字号大小值设置为100px
  2. 再将文本颜色属性值设置为#D33E2A。

通关代码

 <!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>
   <!--------- Begin-------->
   <style type="text/css">
   * {
     font-size: 100px;
     color: #D33E2A;
   }
   </style>
   <!--------- End-------->
</head>
<body>
	<strong>G</strong>
	<strong>o</strong>
	<strong>o</strong>
	<strong>g</strong>
	<strong>l</strong>
	<strong>e</strong>
</body>
</html>

第3关：标签选择器

编程要求

请在右侧编辑器的Begin - End区域内使用标签stong选择器对文本进行样式设置，具体要求是：

  1. 先将文本字号大小值设置为100px
  2. 再将文本颜色属性值设置为#D33E2A。

通关代码

<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8"/>  
   <!--------- Begin-------->
   <style>
     strong {
       font-size: 100px;
       color: #D33E2A;
     }
   </style>
   <!--------- End-------->
   
</head>
<body>
	<strong>G</strong>
	<strong>o</strong>
	<strong>o</strong>
	<strong>g</strong>
	<strong>l</strong>
	<strong>e</strong>
</body>
</html>

第4关：文字Google结构设计

编程要求

请在右侧编辑器的Begin - End区域内编辑字母，具体要求是：

  1. 第一个字母为G,使用strong标签作用，类名为blue
  2. 第二个字母为o,使用strong标签作用，类名为red
  3. 第三个字母为o,使用strong标签作用，id名为orange
  4. 第四个字母为g,使用strong标签作用，类名为blue
  5. 第五个字母为l,使用strong标签作用，id名为green
  6. 第六个字母为e,使用strong标签作用，类名为red

通关代码

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
</head>
<body>
<!--------- Begin-------->
 <strong class="blue">G</strong>
 <strong class="red">o</strong>
 <strong id="orange">o</strong>
 <strong class="blue">g</strong>
 <strong id="green">l</strong>
 <strong class="red">e</strong>
 <!--------- End-------->
</body>
</html>

第5关：文字Google样式设计

编程要求

请在右侧编辑器的Begin - End区域内设置各字母的样式，具体要求是：

  1. 类名为blue的元素对应的文字颜色值为#2B75F5
  2. 类名为red的元素对应的文字颜色值为#D33E2A
  3. id名为orange的元素对应的文字颜色值为#FFC609
  4. id名为green的元素对应的文字颜色值为#00A45D

通关代码

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>

<style type="text/css">
<!--------- Begin-------->
strong{ font-size:100px;}
.blue {
    color: #2B75F5;
}
.red {
    color: #D33E2A;
}
#orange {
    color:#FFC609;
}
#green {
    color: #00A45D;
}
<!--------- End-------->
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>
avatar
文章
阅读
粉丝