CSS教程之选择器
2017-12-08 09:00
375 查看
CSS教程之选择器
css 选择器如果你要在 html 标签中设置 CSS 样式,那么你有四种方法,即 css 选择器有四种
1.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
注意:ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2.class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
同样,类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用
实例<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>演示</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>
3.第三种选择器为 标签选择器 ,即以 html 标签作为 css 修饰所用的选择器。
实例
<style>
h3{
color:red;
}
</style>
<h3>演示</h3>
4.第四种选择器即直接在 标签内部 写css代码。
实例
<h3 style="color:red;">菜鸟教程</h3>
重点
这四种 css 选择器有修饰上的优先级,即:
标签内部 > id > class > 标签选择器
相关文章推荐
- [CSS]层叠样式表中的四种基础选择器的使用教程
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- pyspider 爬虫教程(一):HTML 和 CSS 选择器
- css系列教程1-选择器全解
- css教程-03-CSS选择器之简单选择器
- pyspider 爬虫教程(一):HTML 和 CSS 选择器
- CSS基础教程:群组化选择器
- css 选择器
- SpringMvc教程(七)--如何访问到静态的文件,如jpg,js,css?
- css后代选择器和属性选择器
- 小试牛刀 CSS实例教程 前言与目录
- CSS 选择器种类
- Scrapy爬虫入门教程五 Selectors(选择器)
- CSS网页布局入门教程5:二列宽度自适应
- 浅说css的几个选择器
- css学习3——子元素选择器,交集选择器,并集选择器,兄弟选择器,序选择器
- # html+css基础学习笔记-选择器介绍
- CSS 教程Part6 [尺寸、分类、伪类、伪元素、媒介类型](摘录自 W3C School)
- CSS中选择器的优先级 ( ※关于相同属性的覆盖问题 )
- CSS学习笔记(四)CSS id 选择器