CSS选择器

来源：互联网发布：mac控制中心在哪里编辑：程序博客网时间：2024/06/07 03:03

概要：

    在html中，选择器就是用来在页面中定位元素使用。浏览器对于不同类型的选择器使用不同的方法查找元素；核心的选择器如下表所示（他们也是应用最为广泛的选择器）：

核心选择器

多种选择器总结：

     一般情况下,使用基于id和class属性选取元素（简单选择器）。除了这 种情况之外，还有如下多种选择器方式可供使用：

① 属性选择器

样例代码如下：...[lang]{    background-color: grey;    color: #ffffff;}[lang$="s"]{    font-size: 14px;}......<body><h1 lang="en">h1类标题</h1><h2 lang="en">h2类标题</h2><h2 lang="es">h2类标题</h2>...

② 关系选择器

样例代码如下：...h1 ~ [lang]{    background-color: grey;    color: #ffffff;}......<h2 lang="">h2类标题</h2><h1 >    h1类标题    <span lang="">span        <span>span的后代元素</span>    </span></h1><h2 lang="">h2类标题</h2><h2 lang="es">h2类标题</h2>...

③ 伪元素和伪类选择器

样例代码如下：...p:first-letter{    font-size: x-large;    color: red;}:nth-of-type(2){    background-color: red;    color: #000000;}...

④ 联合选择器和反选择器

利用选择器组合实现联合选择和反选择。

这里写图片描述

样例代码如下：...h1, h2{    background-color: red;    color: #000000;}:not(html):not(body):not(:first-child){    border: medium double #000000;}...

1 0