2.2 CSS选择器_HTML视频教程

- 灬无言 - 阅 2,161

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

2.2.1 简单选择器

  • 元素选择器

文档的元素就是最基本的选择器。

简单来说,就是HTML标签做选择器。

语法:  标签{声明;}

例:

html {

color:red;

}

p {

font-size:20px;

}

  • 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

可指定单个元素,也可多个。通常类选择器还可以结合使用。

语法:  .类选择器名 {声明}      “.”+ 类选择器名

命名规则:字母或下划线开头,可以包含字母、下划线和数字。

例:

<head>

<style type=”text/css”>

.lizi {

color:red;

}

</style>

</head>

<body>

<div class=”lizi”>例子一</div>

<p class=”lizi”>例子二</p>

</body>

  • ID选择器

ID选择器一个文档中只能使用一次。

语法:  #ID选择器名 {声明}      “#”+ ID选择器名

命名规则:字母或下划线开头,可以包含字母、下划线和数字。

例:

<head>

<style type=”text/css”>

#lizi1 {

color:red;

}

#lizi2 {

color:red;

}

</style>

</head>

<body>

<div id=”lizi1”>例子一</div>

<p id=”lizi2”>例子二</p>

</body>

  • (锚)伪类

简单介绍一个,链接的类选择器,a:hover{声明;}。它的意思就是当鼠标移动到<a>标签上时,就会链接就是显示出声明的样式。

a:hover{

color:red;

font-size:100px;

}

2.2.2 复杂选择器

  • 选择器分组(并集选择器)

多个简单选择器共用一个样式。

语法:选择器1,选择器2,…选择器N{共用声明}    选择器之间用逗号隔开。

例:

h1,h2,p,body {

color:red;

}

  • 后代选择器

后代选择器可以选择作为某元素后代的元素。

语法:父元素 子元素 {声明}   父元素和子元素之间空格隔开。

例:

div h1 {

font-size:100px;

color:red;

}

2.2.3 其他选择器

  • 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

语法:标签[属性]  { 声明 }  最前面的标签可有可无。

例:

*[width] {color:red;}

p[bgcolor]{font-size:10px;}

  • 子元素选择器

元素的子元素的属性。

语法:元素 > 子元素 {声明}

例:

p > strong {color:red;}  只有p元素的子元素中的strong才会改变样式。

  • 相邻兄弟选择器

相邻兄弟选择器可以使 紧邻的两个元素(同级),拥有共同的父属性

语法:元素A +元素B{声明}   完成之后呢,只为元素B添加了样式。

例:

p + h1 {color:red}

这些并不是全部,一般会常用选择器就可以了。

以上就是小小课堂SEO自学网带来的《2.2 CSS选择器_HTML视频教程》。感谢您的观看。SEO优化培训认准小小课堂!

非特殊说明,本文为小小课堂SEO自学网原创,欢迎转载并保留版权 https://www.xxkt.org/

本站提供SEO培训、咨询、诊断,微信(电话):13722793092 微信公众号:xxktorg

            

一条回应:“2.2 CSS选择器_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章!