伪类与伪元素选择器归纳:

一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)
    1.a标签伪类选择器,其他标签类似
        eg:

<style type="text/css">
/*设置a标签未访问样式*/
a:link{
/*coral:珊瑚色*/
color: coral;
}
/*设置标签访问后样式*/
a:visited{
color:red;
}
/*设置鼠标悬停a标签时的样式*/
a:hover{
/*cyan:青色*/
color: cyan;
/*设置鼠标在a标签上显示为手指样式*/
cursor:pointer;
}
/*设置a标签点击后的样式*/
a:active{
color: #ccc;
}
</style>

2.表示子元素的伪类选择器:(n也可以为:odd【奇数】、even【偶数】)
        :first-child  选中的所有子元素中的第一个孩子
        :last-child  选中的所有子元素中的最后一个孩子
        :nth-child(n) 选中所有子元素的第n个孩子
        :nth-last-child(n) 选中所有子元素的倒数第n个孩子
        :first-of-type     选中所有子元素中每种类型中的第一个孩子
        :last-of-type     选中所有子元素中每种类型中的最后一个孩子
        :nth-of-type(n)  选中所有子元素中每种类型中的第n个孩子
        :nth-last-of-type(n)     选中所有子元素中每种类型中的倒数第n个孩子

:only-child 获取独生子元素,即选中元素中只含有他一个孩子

3.伪类选择器-form表单:(:前面填写需选中元素对应的选择器)
        :focus     聚焦状态时使用的样式
        :disabled  标签禁用时使用的样式
        :enabled     标签可用时使用的样式
        :default   标签默认选中时使用的样式
        :checked     用户选中时使用的样式
        :valid     通过验证后使用的样式
        :invalid     不通过验证使用的样式
        :required  选中必填项时使用的样式
        :optional  选填项使用的样式
        :in-range  在范围内使用的样式
        :out-of-range  在范围外使用的样式

二.伪元素选择器(伪元素以"::"开头,用在选择器后,用于选择指定的元素。)
eg:

<style type="text/css">
/*在指定元素之前添加内容*/
section p::before{
/*content属性值为要添加的内容*/
content: '*';
color: red;
} /*在指定元素之后添加内容*/
section p::after{
/*content属性值为要添加的内容*/
content: '*';
color: red;
} /*选中第一个字符*/
section::first-letter{
color: red;
font-size: 30px;
}
/*选中第一行文字*/
section::first-line{
color: blue;
}
/*用户选中文本设置(只有自身内部文本有该样式效果,里面包含的元素内容不含有,即p标签不会有该样式效果)*/
section::selection{
background-color: teal;
color: yellow;
}
</style>
<!-- body中内容 -->
<body>
<article>
<section>
我是section第一段文字<br />
我是section第二段文字
<span>span</span>
<p>第一段话</p>
<p>第二段话</p>
<p>第三段话</p>
<p>第四段话</p>
</section>
</article>
</body>

CSS样式表及选择器相关内容(二)-伪类与伪元素选择器的更多相关文章

  1. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  3. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  4. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

  5. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  6. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  7. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  8. 8.20 css样式表:样式分类,选择器。样式属性,

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  9. css样式表:样式分类,选择器。样式属性,格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

随机推荐

  1. 1041. Robot Bounded In Circle

    本题题意: 一开始一个机器人站在了(0,0)上,面朝的方向是北,收到三个序列G,L,R. G:直走 L:向左转 R:向右转 按序执行,永远重复. 返回TRUE,如果处在一个圈. 第一个卡住的点: 1. ...

  2. [Go] gocron源码阅读-groutine与channel应用到信号捕获

    直接使用go 函数名()可以开启一个grountine,channel可以接收信息并且如果没有数据时会阻塞住channel对应的是底层数据结构的引用,复制channel和函数传参都是拷贝的引用make ...

  3. 借助meta影藏顶部菜单

    1===>报错 Cannot find module 'webpack/lib/Chunk' 删除node_modules 然后重新下载 4==> 现在已进入页面,底部就有四个菜单,在点击 ...

  4. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  5. 2.Python爬虫入门_requests

    #2019-11-23 #requests的api使用非常简单 import requests import time if __name__=='__main__': # get请求 url_get ...

  6. JS高阶---线程与事件机制(小结)

    [大纲] [主体] 注意:先进先出 事件轮询: 事件初始化代码执行完毕后,开始执行事件队列里的待处理事件 .

  7. SQL(一)简介

    select * from websites 使用的sql为: /* Navicat MySQL Data Transfer Source Server : 127.0.0.1 Source Serv ...

  8. luoguP3233 [HNOI2014]世界树

    题意 看见数据范围就知道是虚树,于是先建出虚树. 考虑先求出虚树上的点的管理点,显然两边dfs,一遍从下往上,一遍从上往下. 之后考虑不在虚树上的点,对于虚树上的每一条边\((u,v)\),我们考虑上 ...

  9. springcloud源码分析(一)之采用redis实现注册中心

    注册中心 在分布式架构中注册中心起到了管理各种服务功能包括服务的注册.发现.熔断.负载.降级等功能,在分布式架构中起到了不可替代的作用.常见的注册中心有eureka,zookeeper等等,在spri ...

  10. matlab练习程序(DBSCAN)

    DBSCAN全称Density-Based Spatial Clustering of Applications with Noise,是一种密度聚类算法. 和Kmeans相比,不需要事先知道数据的类 ...