端午小长假--前端基础学起来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选择器的主要内容，如果未能解决你的问题，请参考以下文章