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

来源：互联网发布：银行软件开发待遇编辑：程序博客网时间：2024/05/16 04:58

多类选择器

效果图：

代码：

<!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>

0 0