码迷，mamicode.com
首页 > Web开发 > 详细

css选择器小结

时间：2016-05-15 11:01:36      阅读：173      评论：0      收藏：0      [点我收藏+]

标签：

一、元素选择器

语法格式如下：

E{
   ……
}

 

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 元素选择器 </title>
    <style type="text/css">
        /* 定义对div元素起作用的CSS样式 */
        div{
            background-color: grey;
            font: italic normal bold 14pt normal 楷体_GB2312;
        }
        /* 定义对p元素起作用的CSS样式 */
        p{
            background-color: #444;
            color:#fff;
            font: normal small-caps bold 20pt normal 宋体;
        }
    </style>
</head>
<body>
      <div>div内的文字</div>
      <p>p内的文字</p>
</body>
</html>

 

 

二、属性选择器

语法格式如下：

  • E{}：该css样式对所有的E元素起作用
  • E[attr]:该样式对所有含有attr属性的E元素起作用
  • E[attr=value]:该样式对所有包含attr属性且attr属性的值为value的E元素起作用
  • E[attr~=value]:该样式对所有包含attr属性且attr属性的值是以空格隔开的系列值，其中某一个值是value的元素起作用
  • E[attr|=value]:该样式对所有包含attr属性且attr属性的值是以连字符隔开的系列值，其中某一个值是value的元素起作用
  • E[attr^="value"]:该样式对所有包含attr属性且attr属性的值为value开头的字符串的E元素起作用
  • E[attr$="value"]:该样式对所有包含attr属性且attr属性的值为value结尾的字符串的E元素起作用
  • E[attr*="value"]:该样式对所有包含attr属性且attr属性的值为value的字符串的E元素起作用

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 属性选择器 </title>
    <style type="text/css">
    /* 对所有div元素都起作用的CSS样式 */
    div {
        width:300px;
        height:30px;
        background-color:#eee;
        border:1px solid black;
        padding:10px;
    }
    /* 对有id属性的div元素起作用的CSS样式 */
    div[id] {
        background-color:#aaa;
    }
    /* 对有id属性值包含xx的div元素起作用的CSS样式 */
    div[id*=xx] {
        background-color:#999;
    }
    /* 对有id属性值以xx开头的div元素起作用的CSS样式 */
    div[id^=xx] {
        background-color:#555;
        color:#fff;
    }
    /* 对有id属性值等于xx的div元素起作用的CSS样式 */
    div[id=xx] {
        background-color:#111;
        color:#fff;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx子字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

 技术分享

三、id选择器

四、类选择器

五、包含选择器：

语法如下：

 Selector1 Selector2{}

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>包含选择器测试</title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div .a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div><section><div class="a">处于div之内且class属性为a的元素</div></section></div>
<p class="a">没有处于div之内、但class属性为a的元素</p>
</body>
</html>

 六、子选择器

语法如下;

Selector1>Selector2{}

其语法与包含选择器相似，但是他们区别如下：对于包含选择器，只要目标选择器在外部选择器对应的元素内部，即使是孙子元素也可以，但是子选择器必须是直接子元素才可以。

实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 子选择器 </title>
    <style type="text/css">
    /* 对所有的div元素起作用的CSS样式 */
    div {
        width:350px;
        height:60px;
        background-color:#ddd;
        margin:5px;
    }
    /* 对处于div之内、且class属性为a的元素起作用的CSS样式*/
    div>.a {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div><p class="a">class属性为a、且是div子节点的元素</p></div>
<div><section><p class="a">class属性为a、且处于div内部的元素</p></section></div>
</body>
</html>

技术分享

七、兄弟选择器（css3新增）

语法如下：

Selector1~Selector2{}

兄弟选择器匹配Selector1对应的元素后面、能匹配Selector2的兄弟节点。

实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> E~F伪类选择器 </title>
    <style type="text/css">
        /* 匹配id为android的元素后面、class属性为long的兄弟节点 */
        #android ~ .long{
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<div>
    <div>疯狂Java讲义</div>
    <div class="long">轻量级Java EE企业应用实战</div>
    <div id="android">疯狂Android讲义</div>
    <p class="long">经典Java EE企业应用实战</p>
    <div class="long">JavaScript权威指南</div>
</div>
</body>
</html>

技术分享

八、选择器组合

语法如下：

Selector1,Selector2,Selector3……{}

{}中的样式会对前面列出的所有选择器起作用

实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 选择器组合 </title>
    <style type="text/css">
    /* div元素、class属性为a的元素、id为abc的元素都起作用的CSS样式 */
    div,.a,#abc {
        width:200px;
        height:35px;
        border:2px dotted black;
        background-color:#888;
    }
    </style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class="a">class属性为a的元素</p>
<section id="abc">id为abc的元素</section>
</body>
</html>

技术分享

九、伪选择器：

css提供的伪选择器主要有如下几个：

  • :first-letter样式对指定对象的第一个字符起作用
  • :first-line样式对指定对象的第一行内容起作用
  • :before该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容
  • :after该选择器与内容相关的属性结合使用，用于在指定对象内部的后端插入内容

:first-letter实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :first-letter </title>
    <style type="text/css">
        span {
            display:block;
        }
        /* span元素里第一个字母加粗、变蓝
        由于span是内联元素，因此需要先把span的display设为block，或者设置width、height，或者把position设置为absolute
        */
        span:first-letter{
            color:#f00;
            font-size:20pt;
        }
        /* section元素里第一个字母加粗、变蓝 */
        section:first-letter{
            color:#00f;
            font-size:30pt;
            font-weight:bold;
        }
        /* p元素里第一个字母加粗、变蓝 */
        p:first-letter{
            color:#00f;
            font-size:40pt;
            font-weight:bold;
        }
    </style>
</head>
<body>
<span>abc</span>
<section>其实我是一个程序员</section>
<p>疯狂Java讲义</p>
</body>
</html>

技术分享

:first-line实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> :first-line </title>
    <style type="text/css">
        span {
            display:block;
        }
        /* span元素里第一行文字的字体加大、变红
        由于span是内联元素，因此需要先把span的display设为block
        */
        span:first-line{
            color:#f00;
            font-size:20pt;
        }
        /* section元素里第一行文字的字体加大、变蓝 */
        section:first-line{
            color:#00f;
            font-size:30pt;
        }
        /* p元素里第一行文字的字体加大、变蓝 */
        p:first-line{
            color:#00f;
            font-size:30pt;
        }
    </style>
</head>
<body>
<span>abc<br/>xyz</span>
<section>去年今日此门中，<br/>
人面桃花相印红。</section>
<p style="width:160px">疯狂Java讲义</p>
</body>
</html>

技术分享

十、伪类选择器

  • 结构性伪类选择器
    • Selector:root匹配文档根元素
    • Selector:first-child匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素
    • Selector:last-child匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素
    • Selector:nth-child(n)匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素
    • Selector:nth-last-child(n)匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素
    • Selector:only-child匹配符合Selector选择器，而且必须是其父元素唯一一个子节点的元素
    • Selector:first-of-type匹配符合Selector选择器，而且同类型、同级的兄弟元素中的第一个元素
    • Selector:last-of-type匹配符合Selector选择器，而且同类型、同级的兄弟元素中的最后一个元素
    • Selector:nth-of-type(n)匹配符合Selector选择器，而且同类型、同级的兄弟元素中的第n个元素
    • Selector:nth-last-of-type(n)匹配符合Selector选择器，而且同类型、同级的兄弟元素中的倒数第n个元素
    • Selector:only-of-type：匹配符合Selector选择器，而且同类型、同级的兄弟元素中的唯一一个元素
    • Selector:empty：匹配符合Selector选择器，其内部没有任何子元素（包括文本节点）的元素
  • UI元素状态的伪类选择器：
    • Selector:link匹配Selector选择器且未被访问前的元素（通常只能是超链接）
    • Selector:visited匹配Selector选择器且已被访问前的元素（通常只能是超链接）
    • Selector:active匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间）的元素（通常只能是超链接）
    • Selector:hover匹配Selector选择器且处于鼠标悬停状态的元素
    • Selector:focus匹配Selector选择器且已得到焦点的元素
    • Selector:enabled匹配Selector选择器且当前处于可用状态的元素
    • Selector:disabled匹配Selector选择器且当前处于不可用状态的元素
    • Selector:checked匹配Selector选择器且当前处于选中状态的元素
    • Selector:defaulted匹配Selector选择器且页面打开时处于选中状态（即使当前没有被选中亦可）的元素
    • Selector:read-only匹配Selector选择器且处于只读状态的元素
    • Selector:read-write匹配Selector选择器且处于读写状态的元素
    • Selector::section匹配Selector选择器的元素中当前元素被选中的内容
  • 浏览器专属属性：
  • css3新增
    • :not
    • :target

 

css选择器小结

标签：

原文地址：http://www.cnblogs.com/yangxiaoguai132/p/5493303.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！