端午小长假--前端基础学起来04CSS选择器

Posted 糖葫芦有点甜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了端午小长假--前端基础学起来04CSS选择器相关的知识,希望对你有一定的参考价值。

定义:

选择器{

  样式;

}

选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>
</head>
<body>
<p>慕课网(IMOOC)是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你可以和朋友一起编程。</p>
</body>

  • 标签选择器:<html><body><h1><p><img>
  • 类选择器

语法:.类选择器名称{css样式代码};

注:1、英文圆点开头2、起名随意,不可中文

使用:

1、先用标签把要修饰的内容标记起来 如<span>天气晴朗</span>

2、使用class=“类选择器名称”为标签设置一个类,如:<span class="weather">天气晴朗</span>

3、设置类选择器css样式,如下:.stress{color:red;}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.setGreen{
color:green;
}
</style>
</head>
<body>
<p>到了三年级下学期时,我们班上了一节<span class="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
</body>

  • ID选择器

语法:与类选择器的区别有两点:(1)使用id=“ID名称”来设置类(2)前面是#号

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#stress{
color:red;
}

</style>
</head>
<body>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,

</body>

类选择器和ID选择器的区别:

(1)ID选择器在一个HTML文档中只能使用一次,而类可以使用多次

<p>今天<span class="stress">天气很好</span>,我们出去<span class="size">放风筝</span></p>

(2)可以使用类选择器为一个元素设置多个样式,ID选择器不可以,只能设置一个样式

.stress{

  color:red;

}

.size{

  font-size:25px;

}

<p>今天<span class="stress size">天气</span>特别好...</p>

  •  ♦♦♦子选择器

语法:即>,用于选择指定标签元素的第一代子元素,例子:将class名为first的下的子元素li加入红色实线边框

<head>

<style type="text/css">

.first>li{border:1px solid red;}

</head>

<body>

<ul class="first">我喜欢吃

  <li>水果</li>

  <li>梨</li>

</ul>

<p class

</body>

  • 后代选择器

语法: 空格,用于选择指定标签元素下的后辈元素,没有搞懂和子选择器的区别(视频8-7)

  • 通用选择器

语法:*,匹配html中所有标签元素,*{color:red;},使用任意html标签的元素字体都将设置为红色

<head>

<style type="text/css">

*{color:red:}

</head>

伪类选择符

语法:允许给html中不存在的标签设置样式,比如给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}

<head>

<style type="text/css">

a:hover{

  color:red;

  font-size:20px;

}

</head>

<body>

今天天气很好,在阳台上晒<a>太阳</a>

</body>

分组选择符

语法:为多个标签设置同一个样式,分组选择符是逗号,

 

这节的视频再看看,有点不懂,后几段

 

以上是关于端午小长假--前端基础学起来04CSS选择器的主要内容,如果未能解决你的问题,请参考以下文章

端午小长假--前端基础学起来01

端午小长假--前端基础学起来02与浏览器交互,表单标签

零基础学前端开发之CSS3深入选择器

前端04 /css简绍/css选择器

想学web前端需要学啥知识

Web前端-CSS基础与应用