2、伪类选择器的语法 selector:pseudo-class{property:value;}a:link{color:#FF0000;}input:focus{background-color:yellow;} 注意:伪类名称对大小写不敏感; 3、常用的伪类选择器 下面分别介绍一下比较常用几类伪类选择器: 3.1动态伪类选择器 这类选择器主要用于描述用户与元素的交互状态。例如: 1):hover:当鼠...
#Other similar CSS pseudo-class And this understanding applies to the other cousin classes: :last-childand:last-of-type :nth-childand:nth-of-type :only-childandonly-of-type #Browser Support The:notselector is supported by most modern browsers and Internet Explorer 9 and up. ...
CSS :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。实例 设置非 <p> 元素的所有元素的背景色:<!DOCTYPE html> <html> <head> <style> p { color: #000000; } :not(p) { color: #ff0000; } </style> </head> <body...
CSS伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 ...
万象更新 Html5 - css: selector 选择器: 伪类(pseudo class) 示例如下: css\src\selector\demo4.html <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>伪类(pseudo class)</title><!-- 引用外部样式表 <link rel="stylesheet" type="text/css" href="style.css" /> ...
ID 选择器(ID Selector):通过元素的唯一标识符(ID)选择 HTML 元素。 ID 选择器以#开头,后面跟着 ID 名称。 如下代码,#runoob选择器将选择具有 ID 为"runoob"的元素。 #runoob {width:200px;} 属性选择器(Attribute Selector):通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。
class selector: .classname ID selector: #idName universal selector: * ns|* *|* attribute selector [attr=value] Combinators adjacent sibling selectors A+B General sibling selectors A~B Child selectors A>B Descendant Selectors A B Pseudo-elements ...
selector::pseudo-element { property: value; } p::first-line { color: #ff0000; } h1::before { content: '♥'; } 3、常用伪元素选择器 伪元素选择器并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,CSS中有如下四种常用伪元素选择器:first-line、 first-letter、 ...
也说CSS之not:为样式加入例外处理 使用Octopress作为日常的博客发布工具,在加入多说评论的时候遇到了一个问题,顺带接触了css中的not选择,用来将某些Css选择器加入例外,不应用指定的css样式。 用法 :not(selector),参数selector为css中的选择器,可以是元素,类,id等。如不清楚,可以查阅CSS3 选择器了解详细。
/* NOT VALID - selector will not work */div:is(::before,::after){display:block;content:'';width:1em;height:1em;color:blue;} :where「「伪类选择器」」 :where()选择器语法与:is()相同,也被所有现代浏览器支持[8](IE除外)。这往往会导致相同的样式。比如: ...