css中的选择器
来源:互联网 发布:sqlserver 统计表空间 编辑:程序博客网 时间:2024/05/29 18:14
1、类选择器、".名称"
<pre name="code" class="html"><pre name="code" class="html"><head><style type="text/css">.className{ color:blue;}</style></head><body><p>css样式中的<span class="className">类选择器</span>的使用</p></body>
2、ID选择器、“#名称”
<head><style type="text/css">#idName{ color:blue;}</style></head><body><p>css样式中的<span id="idName">ID选择器</span>的使用</p></body>3、标签选择器、“标签”
<head><style type="text/css">span{ color:blue;}</style></head><body><p>css样式中的<span>ID选择器</span>的使用</p></body>
相同点:可以应用于任何元素
不同点:
a、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
b、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
5、子选择器:“.food>li”
下面的代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>子选择符</title><style type="text/css">.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/</style></head><body><h1>食物</h1><ul class="food"> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li></ul></body></html>
效果:
6、包含(后代)择器:“.food li”
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>包含(后代)选择符</title><style type="text/css">.food li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/</style></head><body><h1>食物</h1><ul class="food"> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li></ul></body></html>效果:
7、通用选择器:“*”
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>* 选择符</title><style type="text/css">* {color:red;}</style></head><body> <h1>练习</h1> <p>通用选择器</p></body></html>8、伪类选择符:“标签:hover”
它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
9、分组选择符:“标签1,标签2”
它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
h1,span{color:red;}相当于:
h1{color:red;}span{color:red;}
0 0
- CSS中的选择器
- CSS 中的选择器总结
- css中的选择器
- CSS选择器中的空格
- CSS中的选择器
- css中的选择器
- css中的选择器
- css中的各种选择器
- CSS中的选择器
- css中的选择器
- css中的选择器
- Html+CSS CSS中的选择器
- jquery获取css中的选择器
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- 浅谈CSS选择器中的空格
- CSS中的四种选择器
- 五、DRPC
- 5-5 表格输出
- 二次进入ViewPager中的fragment无视图无数据
- CSDN博客文章之Java资源
- 开博客,立flag
- css中的选择器
- 重庆大学软件学院2013级操作系统实验四:虚拟内存
- 【每日一剂】---ADB
- WSASocket()与Socket()的区别
- Mac——如何输入⌘、⌥、⇧、⌃、⎋等特殊字符
- boa研究学习(1):最开始基本的一些linux编程
- Junit原理详解三
- 二叉树的顺序存储
- Spring注解@ResponseBody