WEB前端第十一课—

当前位置:

首页 > 网站开发 > JavaScript教程 >

WEB前端第十一课——CSS选择器

1.属性选择器

　　通过HTML的属性及属性值来选择元素，如<p att= "val" >文本内容</p>，class 即是<p>元素的属性，val 则是 att 的属性值

　　属性选择器的书写格式：元素[属性名称 = "属性值"] {color: red; }，等号只是其中一种关系符号

　　属性选择器类型：

　　　　　　　　　① E [att ]　　　　　选择具有 att属性的 E元素

　　　　　　　　　② E [att = "val" ]　　选择具有 att属性且属性值等于 val的 E元素

　　　　　　　　　③ E [att ~= "val" ]　选择具有 att属性，且属性值列表包含 val属性值的 E元素

　　　　　　　　　　　　　　　　　　如<p class= "GP CP LP" >文本内容 </p>，属性选择器：p [class $= "CP" ] {color: yellow; }

　　　　　　　　　④ E [att ^= "val" ]　选择具有 att属性，且属性值或列表以 val开头的 E元素

　　　　　　　　　　　　　　　　　　如<p class= "GP CP LP" >文本内容 </p>，属性选择器：p [class ^= "GP" ] {color: pink; }

　　　　　　　　　⑤ E [att $= "val" ]　选择具有 att属性，且属性值或列表以 val结尾的 E元素

　　　　　　　　　　　　　　　　　　如<p class= "GP CP LP" >文本内容 </p>，属性选择器：p [class $= "LP" ] {color: red; }

　　　　　　　　　⑥ E [att *= "val" ]　选择具有 att属性，且属性值中包含 val字符串的 E元素

　　　　　　　　　　　　　　　　　　如<a href= "mail.163.com" >网易邮箱 </a>，属性选择器：a [href *= "163" ] {color: orange; }

　　　　　　　　　⑦ E [att |= "val" ]　选择具有 att属性，且属性值以 val开头同时使用“分隔符号连接”的 E元素

　　　　　　　　　　　　　　　　　　如 <div class= "cn-BeiJing">文本内容 </div>，属性选择器：div [class |= "cn" ] {color: green; }

2.链接伪类选择器

　　伪类通过冒号来定义，用于设定元素的状态变化，使元素看上去更加动态

　　① E:link，主要用于设置超链接 <a>在未被访问前的样式（特指 a标签）

　　　　书写格式：a:link {color: black; }，未访问是<a>的颜色，设置别的元素没有效果

　　② E:visited，主要设置超链接 <a>在链接地址已被访问过时的样式（特指 a标签）

　　　　书写格式：a:visited {color: blue; }

　　③ E:hover，设置鼠标悬停在元素上时的样式，不限于 <a>标签

　　　　书写格式：p:hover {color: red; }

　　④ E:active，设置点击鼠标时元素的样式

　　　　书写格式：div:active {color: white; }

　　对同一个元素使用上述四种选择器时，设置顺序必须按照上述次序

3.结构性伪类选择器

　　① E:not (s选择器)，匹配不含有 s选择器的 E元素，括号中不需要加引号

　　　　书写格式：div:not ( .s1) {color: blue; }，选择类名中不包含有 s1的 div元素

　　② E:first-child，匹配父元素的第一个子元素E

　　　　要使该选择器生效，E元素必须是某个元素的第一个子元素，一般的元素都是<body>的子元素，所以通常都可以使用该伪类，而body不是子元素，所以不可以使用

　　语法实例：

　　③ E:last-child，匹配父元素的最后一个子元素E，用法与“first-child”类似

　　④ E:only-child，E元素是唯一的子元素时被匹配

　　⑤ E:empty，匹配没有任何子元素（并且不包括text节点）的E元素，即空的E元素

　　⑥ E:checked，匹配界面上处于选中状态的E元素，多用于input type 为 radio 与 CheckBox 时

　　测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS选择器</title>

    <style>

        /*ul:first-child {color: blue}*/

        /*li:first-child {color: darkorange}*/

        input:checked+span {color: red}

    </style>

</head>

<body>

<!--    <ul>-->

<!--        <h3>标题内容</h3>-->

<!--        <li>列表行1</li>-->

<!--        <li>列表行2</li>-->

<!--        <li>列表行3</li>-->

<!--    </ul>-->

<!--    <ul>-->

<!--        <li>列表行A</li>-->

<!--        <li>列表行B</li>-->

<!--        <li>列表行C</li>-->

<!--    </ul>-->

    <input type="radio" name="sex" checked="checked"> <span> male</span>

    <input type="radio" name="sex" > <span>female</span>

</body>

</html>

　　⑦ E:nth-child()，选中第几个子元素E

　　测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS选择器</title>

    <style>

        p:nth-child(2) {color: red}

    /*    （n）中的n值可以为数字、xn（x的倍数）、odd（奇数）、even（偶数）*/

    </style>

</head>

<body>

    <p>第一段内容</p>

    <p>第二段内容</p>

    <p>第三段内容</p>

    <p>第四段内容</p>

    <p>第五段内容</p>

</body>

</html>