记录:CSS选择器学习
常用选择器:标签选择器、类选择器、ID选择器
子选择器(Child selectors)
还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。
.con>p{color:red;}
* IE6不支持该选择器
包含(后代)选择器
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。
.con p{color:red;}
通用选择器
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素。
* {color:red;}
* 也可以用于选择器下使用 .con * {color:red;},意为con类下所有元素。
伪类选择符
更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
关于伪选择符:到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用:hover了(其实伪类选择符还有很多,尤其是css3中,但是不能兼容所有浏鉴器)。其实:hover可以放在任意的标签上,比如说p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是a:hover的组合。
分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下:
h1,span{color:red;}
相邻兄弟选择器(Adjacent sibling selector)
可选择紧接在另一元素后的元素,且二者有相同父元素。
http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
CSS 属性选择器
CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。
记录:CSS选择器学习的更多相关文章
- html之css选择器学习
相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...
- CSS选择器学习小结
关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS 选择器学习总结
1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...
- css选择器学习(二)属性选择器
属性选择器 /*******************************************css2中的属性选择器*************************************** ...
- css 选择器 (学习笔记)
参考 http://zachary-guo.iteye.com/blog/605116 1. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...
- XPath、CSS 选择器 -学习地址
http://www.w3school.com.cn/cssref/css_selectors.asp http://www.w3school.com.cn/xpath/xpath_syntax.as ...
- 第七十节,css选择器
css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中 CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
随机推荐
- 在pom.xml中引入jar包坐标的依赖范围
A依赖B,需要在A的pom.xml文件中添加B的坐标,添加坐标时需要指定依赖范围,依赖范围包括: compile:编译范围,指A在编译时依赖B,此范围为默认依赖范围.编译范围的依赖会用在编译.测试.运 ...
- tomcat/eclipse提速[z]
在使用Eclipse开发项目过程中,一度使Eclipse陷入瘫痪状态,Tomcat启动项目时也异常缓慢,增加了超时限制并没有用,有时候项目根本运行不起来,简直让人崩溃,可能我电脑内存小(4G),配置低 ...
- 关于transform-style:preserve-3d的些许明了
父元素要添加属性transform-style:preserve-3d;和transform:perspective(800px);还有相对定位 首先设置子元素 具有3D属性,然后再设置视角与3D元素 ...
- c#一个统计运行时间方法
public string STD(int HowManySecond) { ) { "; } string ShowStr = ""; * )) { ShowStr + ...
- (转)Eclipse导入EPF配置文件
为了美化Eclipse大家可以从 http://www.eclipsecolorthemes.org/ 下载EPF配置文件,使用方法如下 (1)从File菜单 选择Import (2) 选择Gen ...
- hdu 1175(BFS&DFS) 连连看
题目在这里:http://acm.hdu.edu.cn/showproblem.php?pid=1175 大家都很熟悉的连连看,原理基本就是这个,典型的搜索.这里用的是广搜.深搜的在下面 与普通的搜索 ...
- Java.Annotations
Annotation 0. Annotation Tricks http://developer.android.com/reference/java/lang/annotation/Annotati ...
- Luogu 2822[NOIP2016] 组合数问题 - 数论
题解 乱搞就能过了. 首先我们考虑如何快速判断C(i, j ) | k 是否成立. 由于$k$非常小, 所以可以对$k$分解质因数, 接着预处理出前N个数的阶乘的因数中 $p_i$ 的个数, 然后就可 ...
- 测试 Open Live Writer
我要试试. 看看图片如何: 这是从电脑端上传的一个例子,如果编辑器里可以支持复制粘贴图片就好了. Open Live Writer 发布以后,还可在保存在本地,想起来的时候就修改一下. 再美化一下. ...
- STL基础3:map
#include <iostream> #include <map> #include <string> using namespace std; #define ...