CSS基础——CSS 基础（中）

目录

前言

伪选择器

伪类

标签的伪类

获取焦点   

指定元素前

指定元素后

选中元素

伪元素

属性选择器   

 title属性

其他子元素选择器

兄弟选择器

否定伪类

---

前言

上一篇文章我们讲解了关于CSS一些定义及部分选择器，接下来我们接着看CSS中的选择器内容

伪选择器

伪类

用来表示元素定的一种特殊状态。

例如：已经访问过得超链接，普通的链接，获取焦点以后的文本框

当我们需要为处在这些特殊状态的元素去设置样式的时候，就可以使用我们的伪类来实现

标签的伪类

为一个尚未反问过得链接设置一个颜色

        :link

                标识普通连接（没有访问过的链接）

为已经访问过的链接设置一个颜色

        :visited

                标识访问过的链接

                由于涉及到了用户的隐私行为，因此使用visited的时候只能设置字体颜色。

这个访问和未访问过，是通过浏览器的浏览记录来自动判断是否访问过。

鼠标移入链接的状态

        :hover

                标识鼠标移入的状态

        :active

                标识的是超链接被点击的状态

注意：这里hover和active不止是a标签能够使用，其他的标签也是可以使用的，比如p标签

获取焦点   

        :focus

指定元素前

        :before

指定元素后

        :after

选中元素

        ::selection

        注意火狐浏览器中要换个写法::-moz-selection

伪元素

为p中第一个字符来设置一个特殊的样式

p:first-letter{

        color: yellow;

        font-size: 50px;

}

为p的第一行来设置特殊的样式

p:first-line{

        color: yellow;

        font-size: 50px;

}

为p设置最前面的样式

        一般before都需要结合content这个样式一起使用

        通过content可以向before或者after的位置添加一段内容并控制样式

p:before{

        content:“我是before内容”;

        color:yellow;

}      

p:after{

        content:“我是after内容”;

        color:green;

}     

属性选择器   

可以根据元素中的属性或者是属性值来选取我们指定的元素。下面列出一些常用的属性选择器

语法:

[属性名或者class]选取指定属性的一组元素

[属性名=“属性值”]选取指定属性值，并且属性值为指定的内容的一组元素

[属性名^=“ab”]选取指定属性值，并且属性值为指定的内容(ab)开头的一组元素

[属性名$=“ab”]选取指定属性值，并且属性值为指定的内容(ab)结束的一组元素

[属性名*=“ab”]选取指定属性值，并且属性值包含指定的内容(ab)的一组元素

例：p[title]{}

       p[title="hello"]{}

       p[title^="he"]{}

       p[title$="he"]{}

        p[title*="he"]{}

 title属性

这个属性是可以给任何标签指定title属性的。

当鼠标移入到元素上的时候，元素当中的title属性的内容将会变为提示文字显示

其他子元素选择器

 :first-child – 选择第一个子标签

 :last-child – 选择最后一个子标签

 :nth-child – 选择指定位置的子元素

        注意此处可以添加参数比如

        nth-child(even){}  此处even标识偶数位置子元素

        nth-child(odd){}   此处odd标识基数位置子元素

 :first-of-type

        和：first-child这些相类似，只不过child是在所有的子元素重排列，而type是在当前类型的子元素中排列

 :last-of-type

 :nth-of-type

        – 选择指定类型的子元素

兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法:

         – 查找后边一个兄弟元素（可以选中一个元素后紧挨着的指定的兄弟元素）

                • 兄弟元素 + 兄弟元素{}

         – 查找后边所有的兄弟元素

                • 兄弟元素 ~ 兄弟元素{}

否定伪类

否定伪类可以从选中的元素中踢出某些指定元素

语法:

        :not(选择器){}

 例子：

        p:not(.hello)

                表示选择所有的p元素但 是class为hello的除外。