CSS选择器深入解析-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[target]{
            font-family: "隶书";
            font-size: larger;
            color: lawngreen;
        }

    </style>
</head>
<body>
    <h2>带有target属性的div</h2>
    <div target="text1">文本1</div>
    <div target="text2">文本2</div>
    <div target="text3">文本3</div>
    <div title="wb">文本4</div>
</body>
</html>

2、标签名[属性名=值]：选择含有给定属性值的标签

eg:div[target="text1"]{ }

div[target="text1"]{
            font-weight: bolder;
            color: lightcoral;
        }

3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的

eg：div[target^="bj"]{ }

div[title^="bj"]{
        color: cyan;
    }

注：不必是完整单词

4、标签名[属性名|=值]：选择给定属性值是以某个字符开头的

注：必须是完整单词

5、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的

eg:div[title$="city"] { }

div[title$="city"]{
        font-size:70px;
    }

6、标签名[属性名*=值]：选取属性值包含指定词的元素

 div[title*="z-"]{
        font-family: "黑体";
    }

7、应用

设置表单样式：若需为不带 class 或 id 的表单设置样式，属性选择器会很有用

三、CSS的关系选择器（CSS组合器）

1、后代选择器:匹配属于指定元素后代的所有元素。（空格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            background-color: lightcoral;
        }

    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <h2>标题</h2>
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
    </div>
    <p>第五段不在div中</p>

</body>
</html>

2、子选择器:匹配属于指定元素子元素的所有元素。（>）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p{
            background-color: lightcoral;
        }

    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <h2>标题</h2>
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <section><p>非子代但属于后代</p></section> 
        <p>第四段</p>
    </div>
    <p>第五段不在div中</p>

</body>
</html>

3、相邻兄弟选择器:匹配所有作为指定元素的相邻同级的元素。(+)

同一个父元素、第二个元素必须紧跟在第一个元素后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div+p{
            background-color: lightcoral;
        }

    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <h2>标题</h2>
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <section><p>非子代但属于后代</p></section> 
        <p>第四段</p>
    </div>
    <p>第五段</p>
    <code>一些文字</code>
    <p>第六段：没有与div紧挨着</p>

</body>
</html>

4、通用兄弟选择器:匹配属于指定元素的同级元素的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div~p{
            background-color: lightcoral;
        }

    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <h2>标题</h2>
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
        <section><p>非子代但属于后代</p></section> 
        <p>第四段</p>
    </div>
    <p>第五段</p>
    <code>一些文字</code>
    <p>第六段：没有与div紧挨着</p>

</body>
</html>

四、伪类选择器

1、什么是伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2、所有CSS伪类

注： a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效！

a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

3、应用

（1）悬停在div上

<!DOCTYPE html>
<html>
<head>
<style>
    p{
        text-align: center;
    }
div {
  background-color:chartreuse;
  color:bisque;
  padding: 20px;
  text-align: center;
}

div:hover {
  background-color:yellow;
}
</style>
</head>
<body>

<p>请把鼠标移到下面的 div 元素上来改变其背景色：</p>

<div>点击改变颜色</div>

</body>
</html>

（2）简单的工具提示悬停

<!DOCTYPE html>
<html>
<head>
<style>
    
p {
    display: none;
  background-color:chartreuse;
  color:bisque;
  padding: 20px;
  text-align: center;
}

div:hover p {
    display: block;
  background-color:darkcyan;
}
</style>
</head>
<body>

<div>请把鼠标移到此处显示p元素：
    <p>我是p元素</p>
</div>

</body>
</html>