CSS选择器

css选择器

CSS选择器可以简单分为三类：简单选择器、伪元素选择器、组合选择器

简单选择器

标签选择器

标签选择器就是以元素的标签作为选择器

<style>
p{color:red}
</style>
<div>
    <p>段落一</p>
    <p>段落二</p>
</div>

类选择器

类选择器就是以元素的class名作为选择器，class值可以有多个

<style>
.special{color:red}
</style>
<div>
    <p>段落一</p>
    <p class="special p">段落二</p>
</div>

ID选择器

id选择器就是以元素的id属性值作为选择器，用法和类选择器查不多，id名不能重复，相同的id贼页面只能出现一次

通配符选择器

用*号作为选择器，选择页面所有元素

属性选择器

选择具有某个属性的元素,属性值如果包含特殊符号要用引号包裹

<style>
[disabled]{ //选择包含属性disabled的元素
    color:red;
}
[type="text"]{ //选择属性type值为text的元素，也可以写成[type=text]
    color:blue;
}
[class~=first]{//选择包含属性值first的元素

}
[type|=pass]{//选择属性值为pass或者以pass-开头的元素

}
[type^=pass]{//选择属性值以pass开头的元素

}
[type$=word]{//选择属性值以word结尾的元素

}
[type*=wor]{//选择属性值包含wor的元素

}
</style>

<form action="">
    <div class="first div">
        <input type="text" disabled value="张三">
    </div>
    <div>
        <input type="password" placeholder="密码">
    </div>
</form>

伪类选择器

a:link{}//href属性里有值的a标签
a:visited{}//选择点击过的a标签
a:hover{}//选择鼠标经过的a标签
a:active{}//选择鼠标点击时的a标签
        //a:link和a:visited只能用于a标签
:enable{}//元素可用
:disable{}//元素不可用
:checked{}//选中的状态

li:first-child
li:last-child
li:nth-child()
li:nth-last-child()

:only-child
:first-of-type
:last-of-type
:nth-of-type
:nth-last-of-type
:only-of-type

:empty
:root
:not()
:target
:lang()

伪元素选择器

::first-letter{},选择第一个字符
::first-line{}选择第一行
::before{content:"before"}在某个元素的前面插入内容
::after{content:"after"}在某个元素的后面插入内容
::selection{}用于倍用户选中的内容

组合选择器

后代选择器

两个选择器用空格隔开，选择后面的元素是前面的后代，子选择器用>隔开，选择直接子元素

兄弟选择器

h2+p{}相邻兄弟选择器
h2~p{}通用兄弟选择器

选择器分组

用逗号隔开

继承

子元素能够继承父元素的某些样式

选择器兼容