css 选择器

首页 > 代码库 > css 选择器

2024-09-19 04:33:21 217人阅读

css选择器小结

一、元素选择器

语法格式如下：

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 选择器

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > css 选择器

css 选择器

css选择器小结

看完仍有疑问？有类似问题直接问程序猿