css选择器的种类

css选择器的种类

id选择器：

#header {}

类选择器：

.header {}

元素选择器：

div {}

子选择器：

ul>li {}

后代选择器：

div p {}

伪类选择器：

a:hover {}

属性选择器：

input[type = "text"] {}

注意：

id选择器优先级高于子类class；

后面的样式覆盖前面的；

指定的样式高于继承；

伪类和伪元素

上面提到的伪类，还有一个叫伪元素的东西

W3C定义：

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于向某些选择器设置特殊效果。

伪类种类

伪元素种类

egs：

伪元素
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>

显示的效果就是“Y”字体变大且颜色改变

伪类
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

显示的效果就是鼠标在链接上悬停，点击等颜色改变