笔记8--CSS基础知识

来源：互联网发布：js解析二维码图片编辑：程序博客网时间：2024/06/05 02:56

3.选择器

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

3.1元素选择器

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

3.2 ID选择器

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

#name{

}

其代码为：

其效果为：

3.3类选择器

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

.className{

....

}

代码为：

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

显示结果为：

从结果上可以看出：odd（...)定义的样式会施加到所有class=“odd”的元素上，比如上例中的第一个和第三个div。

3.4属性选择器

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

代码如下：<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <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="div2">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>
    <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>
</body>

结果如下：

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

title~=:选中属性值包含指定完整单词的元素

代码如下：

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <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>
</html>

结果如下：

代码如下：

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <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>

结果如下：

title^=“div”选中title以属性值div开头的元素

代码如下：

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <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>

结果如下：

title$=“div”选中title以属性值div结尾的元素。

代码如下：

head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <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>

结果如下：

Title*=“div”选中title属性值包含div的元素

3.5关系选择器

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

写法:E F

案例：

.contentp{
font-size:30px;
}

代码如下：

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

写法：E > F（“>”英文状态下的输入）

案例：

.content> a{
font-size:30px;
}

代码：

3.6并选择器

将相同的样示放在一起，类名直接用英文逗号分隔。

写法：E，F（逗号为英文逗号）

.div1,.div2{
    position: relative;
    width:100px;
    height:100px;
}

代码：    <styletype="text/css">
            .div1,.div2{
                position: relative;
                width:100px;
                height:100px;
            }
        .div1{
            border:1px solid yellow;
        }
        .div2{
            border:1px solid blue;
        }
    </style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
</body>

3.7通配符选择器

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

写法：*{

}

案例：

    *{
padding:0;
margin:0;
    }
    </style>
</head>
<body>
<h1>1111111</h1>
<div class="content">
    <p>......<span><ahref="http://www.baidu.com">重庆</a></span>xxxx<ahref="http://www.baidu.com">35°C</a>
    以上高温</p>
</div>
<a href="http://www.baidu.com">点开原文</a>
</body>

效果：

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

3.8兄弟选择器

写法1：E+F

选中最近的第一个“弟弟”元素。不选中自己。

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

代码：

写法2：E~F

选中所有的“弟弟”元素，不选中自己。

3.9伪类、伪元素选择器

1、伪类选择器：

条件1、根据元素不同的状态，自动选择不同的样式。

或条件2、直接添加一个class，给这个class设定特殊的样式。

li：first-child

a：hover：鼠标滑过的时候添加样式

a：active：被激活的时候添加样式，点击那一时刻（按住鼠标左键不放）

a：link：链接地址未被访问时候添加的状态。必须设置href属性

a：visited：链接地址点击之后添加的颜色。必须设置href属性

input：fouce:拥有键盘输入获取焦点时候添加的样式

2、伪元素选择器：

（2.1）需要设置特殊效果的内容放到一个元素（标签）里面span

（2.2）再添加一个class，对class设置特殊格式。

E：first-line

E:first-letter

E:after

E:before

代码：

li：after{
content:"。";
color:blue;
}

阅读全文

0 0