前端基础学习之CSS选择器
来源:互联网 发布:流体力学软件fluent 编辑:程序博客网 时间:2024/06/15 06:18
CSS基础之选择器
派生选择器
通过元素在其位置的上下文关系来定义样式,使标记更加简洁
派生选择器允许你根据文档的上下文关系来定义某个标签的样式,通过合理的使用派生选择器,可以是Html代码更加的简洁
代码示例:
li strong { font-style: italic; font-weight: normal;}
在上面例子中,只有li元素中的strong元素样式为斜体字,无需为strong样式的元素定义特别的class或id,是代码更加的简洁
ID选择器
ID选择器可以为标有特定ID的HTML元素指定特定的样式,ID选择器以#
来定义
下面两个ID选择器分别定义了一个红色元素个一个绿色元素
#red {color:red;}#green {color:green;}
下面的HTML代码中,分别定义了id为red的元素为红色,id为 green的元素为绿色
<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>
在现代的布局中,id选择器常常用来建立派生选择器,虽然id选择器在页面中只能出现一次,但是作为id选择器的派生选择器也可以被使用很多次
代码示例:
#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}#sidebar h2 {font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;}
在上面的代码中,页面中的p元素与在sidebar中的p元素是明显不同的,sidebar内的p元素得到的特殊处理,同时,h2 元素也是同样的道理,在sidebar中的元素h2是特殊处理的,与界面的其他h2元素是不同的
类选择器
在css中,类选择器以.
号显示,引用时,在元素后面加上class=类名
表示
.center {text-align: center}
在上面的例子中,所有拥有center类的Html元素文字均居中显示
<h1 class="center">This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>
在代码中,元素h1和元素p都拥有center类,那就意味着两者都要遵守center类中的约束条件
同id选择器一样,类选择器也可用于派生选择器,用法与id选择器类似,不做过多的阐释,下面为代码示例:
td.fancy {color: #f60;background: #666;}
在上面的代码中,类名为fancy的是橙色且背景为灰色的表格
<td class="fancy">
你可以将类fancy分配给任何一个表格元素多次,那些有fancy标注的表格元素都遵守fancy类的约束,而其他的则不受影响
属性选择器
对带有指定属性的html元素设置样式 ,而不仅限于class和id属性,
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
[title]{color:red;}
上面的例子为带有所有title属性的元素设置样式
代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">[title]{color:red;}</style></head><body><h1>可以应用样式:</h1><h2 title="Hello world">Hello world</h2><a title="W3School" href="http://w3school.com.cn">W3School</a><hr /><h1>无法应用样式:</h1><h2>Hello world</h2><a href="http://w3school.com.cn">W3School</a></body></html>
- 前端基础学习之CSS选择器
- 前端基础-02-CSS选择器
- 前端学习_01.css选择器
- css基础学习-选择器
- web前端之css选择器
- 网页前端CSS之选择器
- CSS基础之选择器
- 前端学习之路-css选择器和布局
- CSS基础之CSS选择器
- 从零开始,学习web前端之css基础
- 系统学习前端之CSS 基础
- iOS转前端之CSS基础学习
- 前端基础学习之CSS样式
- css学习之选择器
- CSS学习之选择器
- 前端基础之CSS
- 前端基础之CSS
- css基础巩固之选择器
- java基础之内部类
- HDU1002 : A + B Problem II
- 迭代器
- 车牌号
- mybatis中的mapper接口文件以及example类的实例函数以及详解
- 前端基础学习之CSS选择器
- Integer String 的equals == 区别
- DOM基础二
- 模拟捕获SIGPIPE信号 实现TCP服务器
- LitJSON之JSON与对象间的相互映射
- [LeetCode] 77. Combinations
- java中最常用jar包
- 【dp专题1】hdu1087最大上升子段和 E
- 119. Pascal's Triangle II