【CSS】CSS(二)

一、CSS伪类选择器

伪类专门用来表示元素的一种的特殊的状态。

比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。

当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
:link：为未访问过的链接设置样式
:visited：访问过的链接
- 浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
:hover：表示鼠标移入的状态
:active：超链接被点击的状态
- :hover和:active也可以为除了超链接以外的其他元素设置样式
*以上4个伪类优先级是一样的，但写时有顺序
- :link和:visited写在:hover和:active的前面
- :hover写在:active的前面

input:focus：文本框获取焦点以后，修改背景颜色
p::selection：对p标签中选中内容使用样式

例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a:link {
                color: yellowgreen
            }

            a:visited {
                color: red
            }

            a:hover {
                color: blue
            }

            a:active {
                color: black
            }

            input:focus {
                background-color: deepskyblue;
            }

            p::selection {
                background-color: paleturquoise;
            }
        </style>
    </head>

    <body>
        <a href="http://www.baidu.com">访问过的链接</a>
        <br>
        <a href="http://www.baidu123.com">未访问过的链接</a>

        <input type='text'>
        <p>我是一个段落</p>
    </body>

</html>

二、伪元素

使用伪元素来表示元素中的一些特殊的位置

:first-letter：为p中第一个字符来设置样式

<style>
    p:first-letter{
        font-size: 50px;
        color:red;
    }
</style>

:first-line：为p中第一行设置样式

<style>
    p:first-line{
        background-color:yellow;
    }
</style>

:before：表示元素最前边的部分。

:after：表示元素最前边的部分。

一般before和after都需要结合content样式一起使用，通过content可以向before或after的位置添加一些内容
```
<style>
    p:before{
        content: "在最前面。";
        color: cyan;
    }
    p:after{
        content:"最后面";
        color:orange;
    }
</style>
```

三、属性选择器

（补充）title属性：
- 可以给任何标签指定
- 当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
[属性名]：选取含有指定属性的元素
[属性名="属性值"]：选取含有指定属性值的元素
[属性名^="属性值"]：选取属性值以指定内容开头的元素
[属性名$=”属性值”]：选取属性值以指定内容结尾的元素

[属性名*=“属性值”]：选取属性值以包含指定内容的元素素

例子：

<style>
    p[title="我是个title"]{
        color:red;
    }
    p[title^="ab"]{
        color: greenyellow;
    }
    p[title$="ab"]{
        color: blueviolet;
    }
    p[title*='a']{
        background-color: yellow;
    }
</style>

<body>
    <p title="我是个title">我是一个段落</p>
    <p title="abcd">我是另一个段落</p>
    <p title="ccab">我是另一个段落</p>
</body>

四、子元素的伪类

:first-child：选中第一个子元素
:last-child：选中最后一个子元素
:nth-child(参数)：可以选中任意位置的子元素
- 该选择器后边可以指定一个参数，指定要选中第几个子元素
- even表示偶数位置的子元素，odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
- 和:first-child这些非常的类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列

例子：（child系列）

若第一个和最后一个子元素都是p标签的则选中

<style>
    p:first-child{
        background-color: yellow;
    }
    p:last-child{
        background-color: antiquewhite;
    }
</style>

<body>
    <p>我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <p>我是一个p标签3</p>
</body>

当最后一个子元素不是p时，不选中

<body>
    <p>我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <p>我是一个p标签3</p>
    <span>我是span</span>
</body>

第一个p标签是body中的第一个子元素

div中的p标签是div中的第一个子元素

<style>
    p:first-child{
        background-color: yellow;
    }
</style>

<body>
	<p>我是一个p标签1</p>
	<p>我是一个p标签2</p>
	<p>我是一个p标签3</p>
	<div>
		<p>我是div中的p标签</p>
	</div>
</body>

例子（type系列）

type只看元素在当前标签中的排列位置

<style>
    p:first-of-type{
        background-color: yellow;
    }
    p:last-of-type{
        background-color: lavender;
    }

</style>

<body>
    <p>我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <p>我是一个p标签3</p>
    <span>我是span</span>
    <div>
        <p>我是div中的p标签</p>
    </div>
</body>

五、兄弟元素选择器

后一个+前一个：后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素

<style>
    /*为span后的一个p元素设置一个背景颜色为黄色*/
    span+p {
        background-color: yellow;
    }
</style>

<body>
    <p>我是一个p标签1</p>
    <p>我是一个p标签2</p>
    <span>我是span</span>
    <p>我是一个p标签3</p>
    <p>我是一个p标签4</p>
</body>

前一个~后边所有：选中后边的所有兄弟元素

<style>
    span~p{
        background-color: blue;
    }
</style>

六、否定伪类

:not(选择器)；
作用：可以从已选中的元素中剔除出某些元素语法。

<style>
    /*为所有的p元素设置一个背景颜色为黄色，除了c1ass值为hel1o的否定伪类*/
    p:not(.hello){
        background-color: yellow;
    }
</style>

<body>
    <p>我是一个p标签1</p>
    <p class="hello">我是一个p标签2</p>
    <p>我是一个p标签3</p>
</body>

posted @ 2020-05-21 10:46 musecho 阅读(127) 评论(0) 收藏举报

刷新页面返回顶部

musecho