css中常用的伪类选择器?七种基本的css选择器
其实css中常用的伪类选择器的问题并不复杂,但是又很多的朋友都不太了解七种基本的css选择器,因此呢,今天小编就来为大家分享css中常用的伪类选择器的一些知识,希望可以帮助到大家,下面我们一起来看看这个问题的分析吧!
谁能详细讲解一下CSS中的伪类选择器
和一般的CSS语法不同(参见CSS语法),CSS伪类的语法有两种。
第一种:
selector:pseudo-class{property: value}
例句:
a:link{color:red}
第二种:
selector.class:pseudo-class{property: value}
例句:
a.c1:link{color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下:
a:link{color:#FF0000}/*未被访问的链接红色*/
a:visited{color:#00FF00}/*已被访问过的链接绿色*/
a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/
a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/
也可以用HTML的class属性来设定伪类。例句如下:
a.c1:link{color:#FF0000}/*未被访问的链接红色*/
a.c1:visited{color:#00FF00}/*已被访问过的链接绿色*/
a.c1:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/
a.c1:active{color:#0000FF}/*鼠标点中激活链接蓝色*/
注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。
伪类有::first-child,:link:,vistited,:hover:,active:focus,:lang
伪元素有::first-line,:first-letter,:before,:after
具体可以看看这个:
html 5 的CSS3新增的伪类选择器还包括哪些
:first-of-type p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-type p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-type p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-child p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
:nth-child(n) p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
:nth-last-child(n) p:nth-last-child(2)同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。
:nth-last-of-type(n) p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。
:last-child p:last-child选择属于其父元素最后一个子元素每个<p>元素。
:root:root选择文档的根元素。
:empty p:empty选择没有子元素的每个<p>元素(包括文本节点)。
:target#news:target选择当前活动的#news元素。
:enabled input:enabled选择每个启用的<input>元素。
:disabled input:disabled选择每个禁用的<input>元素
:checked input:checked选择每个被选中的<input>元素。
:not(selector):not(p)选择非<p>元素的每个元素。
::selection::selection选择被用户选取的元素部分。
css选择器有哪些
1、类别选择器
2、标签选择器
3、ID选择器
4、后代选择器
5、子选择器
6、伪类选择器
7、通用选择器
8、群组选择器
9、相邻同胞选择器
10、属性选择器
扩展资料:
一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能处于不同的位置,
但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明
参考资料百度百科-css选择器
关于css中常用的伪类选择器,七种基本的css选择器的介绍到此结束,希望对大家有所帮助。