多类、属性、后代、子元素、相邻兄弟选择器

最新推荐文章于 2021-10-08 15:35:26 发布

Henry_Jing

最新推荐文章于 2021-10-08 15:35:26 发布

阅读量652

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/JCY1009015337/article/details/53494016

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS中的多种选择器，包括多类选择器、属性选择器、后代选择器、子元素选择器及相邻兄弟选择器，并通过示例展示了它们的具体用法。

多类选择器

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .p1{
            color: red;
        }
        .p2{
            font-size:25px;
        }
        .p1.p2{
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="p1">jingchenyong</p>
    <p class="p2">jingchenyong</p>
    <p class="p1 p2">jingchenyong</p>
</body>
</html>

属性选择器

1、简单属性选择：

例如：[title]{}

2、根据具体属性值选择：

除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值得元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [title]{
            background-color: #29ff19;
        }
        [title="jing1"]{
            background-color: red;
        }
        a[href="http://www.baidu.com/"]{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p title="jing" class="p1">jingchenyong</p>
    <p title="jing1" class="p1">jingchenyong</p>
    <a href="http://jsai2016.ujs.edu.cn/yongaibing/index.html">永爱冰</a>
    <a href="http://www.baidu.com/">baidu</a>


</body>
</html>

部分属性值，[title~="jing1"]

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p strong{
            color: darkred;
        }
    </style>
</head>
<body>
   <p>jingchenyong<strong>woxihuanni</strong>xihuanni</p>
</body>
</html>

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       h1>strong{
           color:blue;
           font-size: 30px;
       }
    </style>
</head>
<body>
    <h1>hello <strong>jikekexueyuan</strong> wolaile</h1>
    <p>hello <strong>jikekexueyuan</strong> wolaile</p>
</body>
</html>

相邻兄弟选择器：

可选择紧接在另一个元素后的元素，且二者有相同父元素

例如：h1+p{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      li+li{
          color:red;
      }
    </style>
</head>
<body>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>
</html>