CSS之选择器详解

功能：在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
类型：
1.元素选择器（类型选择器）：此选择器只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。这是选择所有指定类型的最简单方式。
例如:
html文件：

<p>I am Lewin</p>

css文件:

p{
    text-align:center;
    color:red;
}

2.通用选择器:它允许选择在一个页面中的所有元素。通过对通配符(*)进行操作，从而选择页面上的所有元素。

*{
    text-align:center;
    color:red;
}

但是，如果我们想把个别特殊的样式修改的时候，我们在后面再加一些我们想要的标签即可。例如我想把h1标签特殊处理：

h1{
    color:blue;
}

3.ID选择器：id选择器允许一种独立于文档元素的方式来指定样式。
语法：#id_selector{statements;}
例如:
html文件:

<p id="intro">Lewin</p>

css文件:

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

4.类选择器：类选择器允许以一种独立于文档元素的方式来制定样式。注意是点开头的，这是类选择器的标志。
例如:
html文件:

<div class="container">
        <div class="qd"></div>
        <div class="wd"></div>
        <div class="ed"></div>
    </div>

css文件:

.qd {
    background-color: lightskyblue;
    float: left;
}

.wd {
    background-color: lightseagreen;
    float: left;
}

.ed {
    background-color: lightsalmon;
    float: right;
}

.qd,
.wd,
.ed {
    width: 100px;
    height: 100px;
}

.container{
    background-color:gray;
    width:270px;
    height:500px;
}

5.属性选择器:这些属性选择器尝试匹配精确的属性值:

[attr]：该选择器选择包含attr属性的所有元素，无论attr的值为何。
[attr=vall]：该选择器仅选择attr属性被赋值的val的所有元素
[attr~=vall]：该选择器仅选择具有attr属性的元素，而且要求val值是attr包含的被空格分割的取值列表中有一个时（以空格）

例如：

html文件

    <div class="qd" title="div1">Lewin1</div>
    <div class="wd" title="div2" ppp="lewin">Lewin2</div>
    <div class="ed" title="div3" ppp="test lewin">Lewin3</div>

css文件:

[title]{
    background-color:red;
    margin:10px;
}

[title="div2"]{
    background-color:gray;
}
[ppp~="test"]{
    background-color:blue;
}

6.组合器和选择器组:

Combinators	Seclect
A,B	匹配满足A（和/或）B的任意元素（匹配满足A（和/或）B的任意元素
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A>B	匹配任意元素，满足条件：B是A的直接子节点
A+B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A~B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

选择器分组：通过逗号分隔不同的元素，对他们进行批量操作。
例如：
html文件:

<h1>Lewin</h1>
<h2>Lewin</h2>
<h3>Lewin</h3>

css文件:

h1,h2,h3{
    color:blue;
    }

后代选择器：后代选择其可以选择作为某元素后代的元素。
例如:
html文件:

<p>I am <strong>Lewin</strong></p>
this <strong>strong</strong> has no special effects.

css文件:

p strong{
    color:blue;
}

子元素选择器:与后代选择器相比，子元素选择器只能选择作为某子元素的元素。
html文件:

<h1>I am <strong>Lewin</strong></h1>

css文件:

h1>strong {
    color: blue;
    font-size:60px;
}

猜你喜欢