css关系选择器

1.包含选择器  (A B)

选择所有被A元素包含的B元素,中间用空格隔开

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li{color:green;}
    </style>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
</ul>
<ol>
    <li>ccc</li>
</ol>
</body>
</html>

以上代码定义了ul中两个li,和ol中一个li,然后通过包含选择器改变ul中两个li的颜色,

效果如下:

css关系选择器

 2.子选择器   (A>B)

选择所有作为A元素的直接子元素B,对更深一层的元素不起作用,用>表示.。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div>a{color:red}
    </style>
</head>
<body>
<div>
    <a href="">子元素1</a>
    <p>
        <a href="">孙元素</a>
    </p>
    <a href="">子元素2</a>
</div>
</body>
</html>

以上代码定义了三个a标签,其中一个被p标签包含,然后通过子选择器改变div中两个子

元素的颜色,效果如下:

css关系选择器

 

3.相邻选择器  (A+B)

选择紧跟A元素后的B元素,用加号表示,选择相邻的第一个兄弟元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1+p{color:red;}
    </style>
</head>
<body>
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
</body>
</html>

 

以上代码定义了一个h1标签和两个p标签,然后通过邻近选择器改变与h1相邻元素的

颜色,效果如下:

css关系选择器

 

4.兄弟选择器   (A~B)

选择A元素之后的所有兄弟元素B,作用于多个元素,用~隔开 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1~p{color:red;}
    </style>
</head>
<body>
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
</body>
</html>

以上代码定义了一个h1标签和两个p标签,然后通过兄弟选择器改变h1之后的所有兄弟元素的

颜色,效果如下:

css关系选择器

 

 

上一篇:每日一题leetcode1044.最长重复子串


下一篇:E. Correct Placement(思维)