CSS3 选择器

CSS3 选择器CSS3选择器分为:结构型伪类选择器、UI元素状态伪类选择器,否定选择器,和伪元素一、结构型伪类选择器:first-child选择某个元素的第一个子元素; :last-child选择某个元素的最后一个子元素; :nth-child()选择某个元素的一个或多个特定的子元素; :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算; :…

大家好,又见面了,我是你们的朋友全栈君。

CSS3选择器分为:结构型伪类选择器、UI元素状态伪类选择器,否定选择器,和伪元素

一、结构型伪类选择器

  • :first-child选择某个元素的第一个子元素;
  • :last-child选择某个元素的最后一个子元素;
  • :nth-child()选择某个元素的一个或多个特定的子元素;
  • :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  • :nth-of-type()选择指定的元素;
  • :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  • :first-of-type选择一个上级元素下的第一个同类子元素;
  • :last-of-type选择一个上级元素的最后一个同类子元素;
  • :only-child选择的元素是它的父元素的唯一一个了元素;
  • :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  • :empty选择的元素里面没有任何内容。

二、UI元素状态伪类选择器

1、动态伪类(也称为“锚点伪类”)

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

需要遵循爱恨规则:LoVe/HAte,也就是Link – Visited – Hover – Active

  • :hover用于当用户把鼠标移动到元素上面时的效果;
  • :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
  • :focus用于元素成为焦点,这个经常用在表单元素上。

2、UI元素状态伪类,比如有“:enabled”,”:disabled”,”:checked”

三、否定选择器,比如”:not”

input:not([type="submit"]) {
    border: 1px solid red;
}

四、伪元素

CSS中的伪元素有”:first-line”,”first-letter”,”:before”,”:after”,CSS3是在以前的基础上增加了一个”:”,也就是变成了”::first-line”,”::first-letter”,”::before”,”::after”,另外还新增了一个”::selection”,两个”::”和一个”:”只是CSS3中用来区分伪类和伪元素,这两种方式都是被接受的。

::first-line:选中元素的第一行

::first-letter:选中元素的第一个字母

::before和::after这两个主要用来给元素的前面或后面插入内容,通常和”content”一起配合使用,经常用来清除浮动。

.clearfix::before,.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

::selection 是用来改变浏览网页选中问的默认效果。

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157233.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • setContentView流程

    setContentView流程1、activity、window、DecorView、ViewRoot之间的预备知识activityactivity是Android的四大组件之一,负责控制activity的生命周期和处理事件,负责视图的添加与显示,以及通过一些回调方法与window和View进行交互。一个activity包含一个window,window才是真正的窗口WindowWindow是一个抽象类,它真正的实现类是PhoneWindow。Window通过WindowManager加载一个DecorView到Window中,

  • 选择排序 c语言(链表法)「建议收藏」

    选择排序 c语言(链表法)「建议收藏」选择排序代码链表实现c语言版–vc6.0

  • C/C++获取当前系统时间的方法

    C/C++获取当前系统时间的方法1、使用系统函数,并且可以修改系统时间#include<stdlib.h>usingnamespacestd;voidmain(){system("time");}备注:获取的为 小时:分钟:秒 信息2、获取系统时间(秒级),可以换算为年月日星期时分秒#include<iostream>#include<time.h>us…

    2022年10月19日
  • matlab手写数字识别实验报告_如何用matlab将图像转为矩阵

    matlab手写数字识别实验报告_如何用matlab将图像转为矩阵本文主要是根据《matlab手写神经网络实现识别手写数字》博客中的代码进行试验。由于没有数据集,所以采用了MNIST数据集进行代码的运行。数据集不同所以需要对代码进行微小改动。简介数据处理:4000张作为训练样本,1000张作为测试样本;图像大小:图片的灰度值矩阵(28,28);图像名称:由标签和顺序号组成。标签_顺序号.bmp训练样本:每个数字的图像名称的顺序号是从0-399,各400…

  • 秒杀多线程第四篇 一个经典的多线程同步问题

    秒杀多线程第四篇 一个经典的多线程同步问题

    2021年11月30日
  • Java8学习笔记(一)–Lambda表达式

    Java8学习笔记(一)–Lambda表达式两个概念函数式接口函数式接口就是只显式声明一个抽象方法的接口。为保证方法数量不多不少,java8提供了一个专用注解,这样,当接口中声明的抽象方法多于或少于一个时就会报错。如下图所示:L

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号