css选择器总结

1、元素选择器

如：*{},body{},p{} ; xml中note{},to{},from{}

2、class与id选择器

如：.class{},#id{}

3、伪类选择器

选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动的链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个

元素的第一个字母
:first-line p:first-line 选择每个

元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的

元素
:before p:before Insert content before every

element
:after p:after 在每个

元素之前插入内容
:lang(language) p:lang(it) 为

元素的lang属性选择一个开始值

4、属性选择器

名称 示例 示例说明
属性选择器 [title]{} 选择带有title属性的元素
属性和值选择器 [title=w3c]{} 选择title属性为w3c的元素
属性和值的选择器 - 多值 [title~=hello]{},[lang|=en]{} 选择title里有hello的元素，选择lang里有en的元素

5、组合选择符

选择器 用法 描述
后代选择器 空格" " 所有后代元素
子代选择器 大于号">" 儿子辈后代元素
相邻兄弟选择器 加号"+" 向下相邻的第一个元素，必须有相同的父元素
普通兄弟选择器 破折号"~" 向下相邻的所有元素
（1）后代选择器
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>后代选择器</title>

    <style type="text/css">

        div p{background-color:yellow;}

    </style>

</head>

<body>

    <p>后代选择器</p>

    <p>后代选择器</p>

    <div>

        <nav>

            <p>后代选择器</p>

            <p>后代选择器</p>

        </nav>

        <p>后代选择器</p>

        <p>后代选择器</p>

    </div>

    <p>后代选择器</p>

    <p>后代选择器</p>

</body>

</html>
（2）子代选择器
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>子代选择器</title>

    <style type="text/css">

        div>p{background-color:yellow;}

    </style>

</head>

<body>

    <p>子代选择器</p>

    <p>子代选择器</p>

    <div>

        <nav>

            <p>子代选择器</p>

            <p>子代选择器</p>

        </nav>

        <p>子代选择器</p>

        <p>子代选择器</p>

    </div>

    <p>子代选择器</p>

    <p>子代选择器</p>

</body>

</html>
（3）相邻兄弟选择器
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>相邻兄弟选择器</title>

    <style type="text/css">

        div+p{background-color:yellow;}

    </style>

</head>

<body>

    <p>相邻兄弟选择器</p>

    <p>相邻兄弟选择器</p>

    <div>

        <nav>

            <p>相邻兄弟选择器</p>

            <p>相邻兄弟选择器</p>

        </nav>

        <p>相邻兄弟选择器</p>

        <p>相邻兄弟选择器</p>

    </div>

    <p>相邻兄弟选择器</p>

    <p>相邻兄弟选择器</p>

</body>

</html>
(4)普通兄弟选择器
<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>普通兄弟选择器</title>

    <style type="text/css">

        div~p{background-color:yellow;}

    </style>

</head>

<body>

    <p>普通兄弟选择器</p>

    <p>普通兄弟选择器</p>

    <div>

        <nav>

            <p>普通兄弟选择器</p>

            <p>普通兄弟选择器</p>

        </nav>

        <p>普通兄弟选择器</p>

        <p>普通兄弟选择器</p>

    </div>

    <p>普通兄弟选择器</p>

    <p>普通兄弟选择器</p>

</body>

</html>

6、选择器分组

如：h1,h2,h3{}

总结

伪类选择 与 属性选择 的示例代码

伪类与伪元素的区别

css选择器.md的更多相关文章

  1. CSS选择器的权重与优先规则？

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  2. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  5. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  6. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

  7. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  8. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  9. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

随机推荐

  1. C++模板类代码只能写在头文件？

      这个问题,实际上我几年前就遇到了.最近写个模板类玩的时候,再次遇到.   当我非常仔细的将定义和实现分开,在头文件中保留了最少的依赖后,一切就绪.cpp单独编过.但是当使用的时候,就会报告所有的函 ...

  2. call 方法和 apply方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  3. 00082_Set接口

    1.Set接口介绍 (1)Collection中可以存放重复元素,也可以不存放重复元素,那么我们知道List中是可以存放重复元素的.那么不重复元素给哪里存放呢?那就是Set接口,它里面的集合,所存储的 ...

  4. 【例题 8-11 UVA-10954】Add All

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 就是合并果子.. 每次都合并最小的就可以啦. 别忘了初始化 [代码] /* 1.Shoud it use long long ? 2 ...

  5. 关于oracle sql语句查询时 表名和字段名要加双引號的问题具体解释

      作为oracle的刚開始学习的人相信大家一定会遇到这个问题.如图:          明明就是navicat可视化创建了表,但是就是不能查到!这个为什么呢?           select * ...

  6. Ubuntu 14 中给 APACHE2安装 SSL 模块 Enable SSL site on Ubuntu 14 LTS, Apache 2.4.7:

    Ubuntu 14 中给 APACHE2安装 SSL 模块 Enable SSL site on Ubuntu 14 LTS, Apache 2.4.7: 参考 http://blog.csdn.ne ...

  7. 在IE中opacity透明度

    body{ background: red; opacity: 0.5; filter:alpha(opacity=50); } jQuery: if($.support.opacity == tur ...

  8. golang webservice[ json Martini webframe]

    golang webservice[ json Martini webframe] https://github.com/brunoga/go-webservice-sample 自己修改了一下例子, ...

  9. 【arc062e】Building Cubes with AtCoDeer

    Description STL有n块瓷砖,编号从1到n,并且将这个编号写在瓷砖的正中央: 瓷砖的四个角上分别有四种颜色(可能相等可能不相等),并且用Ci,0,Ci,1,Ci,2,Ci,3分别表示左上. ...

  10. BZOJ2738: 矩阵乘法(整体二分)

    Description 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. Input 第一行两个数N,Q,表示矩阵大小和询问组数: 接下来N行N列一共N*N个数,表示这个矩阵: ...