CSS_03_01_CSS类选择器

第01步：编写css样式：class_01.css

@charset "utf-8";
/* CSS Document */

div.class01{
    background-color:#9F0;
    color:#FFF
    }

第02步：编写html界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器应用</title>
<link href="class_01.css" rel="stylesheet" type="text/css"  />
</head>

<body>
    <div class="class01">
        调用了class_01.css里面的class01样式
    </div>
</body>
</html>

时间： 2024-10-11 00:02:43

CSS_03_01_CSS类选择器的相关文章

CSS系列（7）CSS类选择器Class详解

这一篇文章,以笔记形式写. 1, CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1) 使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2) 类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

添加、移除class类选择器的公共函数

/********************移除class类选择器的公共函数************************///提供需要操作的元素对象以及需要删除的className名即可function removeclassName(element,name){ var classes=element.className.split(' '); if(classes.indexOf(name)!=-1){ classes.splice(classes.indexOf(name)); } el

CSS3 结构性伪类选择器（2）

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

类选择器的语法

类选择器{ 属性:属性值 } <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/> <title>类选择器的用法</title> <style type="text/css"> .green{ font-size:20px; color:green } </s

CSS3的状态伪类选择器

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3的状态伪类选择器</title> 6 <style type="text/css"> 7 :enabled{ 8 background-color: blue; 9 }; 10 :disabled{

CSS3新增加的伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3新增加的伪类选择器</title> <style type="text/css"> /*root所有的元素*/ :root{ color: pink;

背景图+列表+伪类选择器

Background-color|image|position|repeat 颜色图片位置重复图片优先 CSS Sprites雪碧图:减少http请求,减小服务器压力.一张大图,通过背景偏移position截取小图. Li列表 list-style list-style-image list-style-position list-style-type <a>标签伪类选择器 link 未访问 visited 已访问 hover 悬停可用于其他元素 active 点击可用于其他元素

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来描述一下这俩: E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E, 还是语言描述了之后用例子比较好上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为了说明问