CSS选择器详解-优快云博客

选择器的种类繁多，使用方法也各有不同，各位看官不必死记硬背，只要理解每个选择的使用方法，在实际案例中能够使用就好，多看看，多了解。多做案例，多模仿网页

选择器

所谓选择器，指的是选择施加样式目标的方式。

3.1元素选择器

用标签名作为选择器，选中所有相应的元素

<style type="text/css">
        div{
            font-size: 24px;
            color: red;
        }
        p{
            font-size: 32px;
            color: blue;
        }
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器1</p>
    <p>元素选择器2</p>
</body>

3.2 id选择器

顾名思义，是根据id来选择元素，其样式定义形式为

#idname{

………..

}

<style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

显示效果：

3.3类选择器

根据class属性来选择元素，其样式定义形式为：

.classname{

…………

}

<style type="text/css">
        .even{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .odd{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
</body>

显示效果

从结果可以看出：.odd{……}定义样式会施加到所有class=“odd”的元素上，不分标签，比如上例中的第一个和第三个div，当然也包括class=“odd”的<p>.

3.4属性选择器

根据某个属性的特性（比如有无、值等）来选择

1）根据有无某属性来选择

<style type="text/css">
       [title]{
           width: 100px;
           height: 50px;
           background-color: red;
           border: 1px solid green;
       }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="dic2">2</div>
    <div>3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>

显示效果：

从家结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。

2）根据属性的值来选择

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Title</title>
    <style type="text/css">
       [title='div2']{
           width: 100px;
           height: 50px;
           background-color: red;
           border: 1px solid green;
       }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div>3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>

显示效果为：

从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2

~=：属性值包含指定完整单词的元素

<style type="text/css">
       [title~='div']{
           width: 100px;
           height: 50px;
           background-color: red;
           border: 1px solid green;
       }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div>3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>

显示效果为：

^=‘div’：选中title属性值以‘div’开头的元素

[title^='div']{

$=‘div’：选中title属性值以‘div’结尾的元素

[title$='div']{

*=‘div’：选中title属性值所有包含‘div’的元素

[title *='div']{

快捷键：

ctrl+X：删除行

ctrl+shift+enter：切换到下一行

3.5结构选择器

1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子……

写法：E F

案例：

显示效果：

2）子元素选择器：通过某一个元素选中直接后代元素。

写法：E > F（">”英文输入）

显示效果：

3.6并选择器：

将相同的样式放在一起，类名直接用英文逗号（,）隔开。

写法：E,F

显示结果：

3.7通配符选择器：

通配符选择器可以选中所有的标签。

显示结果

显示结果：

注意：通配符选择器对页面所有元素都会设置对应的样式，而实际上呢，有很多元素默认是不带任何的样式的。

3.8兄弟选择器

写法：（1）E + F：选中最近的一个“弟弟”元素。不选中自己。

.go-to + a{
font-size: 20px;
}

</style>
</head>
<body>
    <h1>中央气象台继续发布高温橙色预警 局地超40度</h1>
    <div class="content">
        <a href="http://www.huadianedu.com">前往现场0</a>
        <a class="go-to"href="http://www.huadianedu.com">前往现场1</a>
        <a href="http://www.huadianedu.com">前往现场2</a>
        <a href="http://www.huadianedu.com">前往现场3</a>
    </div>
    <a href="http://www.huadianedu.com">查看原文</a>
</body>