CSS 选择器

2019-04-26 本文已影响0人 maskerII


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>

    <!--id 选择器-->
    <style>
        #para1 {text-align: center;color: red;}
    </style>

    <!--class选择器-->
    <style>
        p.center {text-align: center;}
    </style>

    <style>
        .left {text-align: left;}
    </style>


    <!--元素选择器-->
    <style>
        h2{font-size: 14px;font-style: italic;}
    </style>

    <!--包含选择器-->
    <style>
        h3 {color: red;}
        div h3 {
            color: yellow;
        }
    </style>

    <style>
        .first span {color: red;}
    </style>

    <!--子选择器-->
    <style>
        h4 {color: red;}
        div>h4{
            color: yellow;
        }
    </style>

    <style>
        .second>span {
            color: red;
        }
    </style>

    <!--兄弟选择器-->
    <style>
        h5 {color: red}
        div~h5 {
            color: yellow;
        }
    </style>


    <!--通用选择器-->
    <style>
        *{background-color: gray;}
    </style>

    <!--相邻选择器-->
    <style>
        h6 {color: red}
        div+h6 {
            color: yellow;
        }
    </style>





</head>
<body>
    <!--id选择器-->
    <h1>Id选择器</h1>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响</p>

    <!--class选择器-->
    <h1>类选择器</h1>
    <h1 class="center">这个标题不受影响</h1>
    <p class="center">这个段落居中对齐</p>
    <h1 class="left">这个标题居左</h1>
    <p class="left">这个段落居左</p>

    <!--元素选择器-->
    <h1>元素选择器</h1>
    <h2>元素选择器</h2>

    <!--包含选择器-->
    <h1>包含选择器</h1>
    <h3>文字是红色的</h3>
    <div>
        <h3>文字是黄色的</h3>
        <i><h3>文字是黄色的</h3></i>
    </div>

    <p class="first"><span>文字是红色的</span></p>
    <p class="first">文字非红色的</p>

    <!--子选择器-->
    <h1>子选择器</h1>
    <div>
        <h4>文字是黄色的</h4>
        <i><h4>文字是红色的</h4></i>
    </div>

    <p class="second"><span>文字是红色的</span></p>
    <ol class="second">
        <li><span>内容不是红色的</span></li>
        <li><span>内容不是红色的</span></li>
    </ol>

    <!--兄弟选择器-->
    <h1>兄弟选择器</h1>
    <div>
        <h5>h5文字是红色的</h5>
        <div>div文字是白色的</div>
        <h5>h5文字是黄色的</h5>
    </div>

    <h5>文字是黄色的</h5>
    <h5>h5文字是黄色的</h5>
    <div>div</div>
    <h5>h5文字是黄色的</h5>

    <!--通用选择器-->
    <h1>通用选择器</h1>
    <p>Html任意标签元素的背景颜色都是灰色的</p>

    <!--相邻选择器-->
    <h1>相邻选择器</h1>
    <div>
        <h6>h6文字为红色的</h6>
        <div>div文字是白色的</div>
        <h6>h6文字是黄色的</h6>
    </div>

    <h6>h6文字是黄色的</h6>
    <h6>h6文字是红色的</h6>
    <div>div</div>
    <h6>h6文字是黄色的</h6>


</body>
</html>

1、id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例

#para1
{
    text-align:center;
    color:red;
}

Remark ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。
例：id为name的标签会匹配下面的样式

<style>
#name{
  color:red;
}
</style>
<p id="name">red text</p>

2、class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。

Remark 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

3、类选择器（class selector，CS）

类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。
例：class属性值为value的标签会匹配下面的样式

<style>
.value{
  text-align:center;
}
</style>
<p class="value">center text</p>

4、元素选择器

元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。
例：所有的p标签都会匹配以下的样式

<style>
p{
  font-style:italic;
}
</style>
<p style="font-style:italic">italic text</p>

5、属性选择器

属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，
语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例

6、包含选择器

包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，
语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。

例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>

<div>
    <p>yellow text</p>
</div>

包含选择器除了有 A B{...} 的形式外（A和B都是标签），还可以有这种形式：.A B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

7、子选择器

子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，
两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为
包含选择器对应的标签内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。
例：以下div内的p标签匹配样式，div内的table内的p不匹配

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p>
<table>
    <tr>
        <td>
            <p>no red text;</p>
        </td>
    </tr>
</table>
</div>

子选择器除了有 A >B{...} 的形式外（A和B都是标签），还可以有这种形式：.A >B{...} 的形式（A是类名，B是标签）。
作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。
而非直接子代的 B 标签的内容是不会改变的。

<style>
.first>span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容不是红色</span></li>
  <li><span>内容不是红色</span></li>
</ol></p>

</body>

8、兄弟选择器

兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，
语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p>
<div>no red text</div>
<p>red text</p>
</div>

9、通用选择器

语法形式为：*{属性：属性值}。它的作用是匹配 html 中的所有元素标签。

<style>
    *{color:red;}
</style>

<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>

10、相邻选择器

语法形式为：
A+B{
声明1;
声明;
...
}

<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>