前端基础：关于css选择器的总结（一）

一，css选择器有那些

1，标签选择器（如：div，p，ul，li等）

2.，类选择器 （如：.head, .head_logo）

给标签取class名，以点（.）加class名开头，选择所有该class名的元素

 3，id选择器（如：#name,#name_txt）

给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘wrap’”的元素

                                    

4，子元素选择器（如：a>img,ul>li）只能选择挨着父选择器的亲儿子

以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块)

                                     

5，后代选择器（如：ul li，div p）可以选择父选择器的所有指定后代

 以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块)

                                     

  

 6，相邻兄弟选择器（如：ul+li，div+p）

 以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)

 7、兄弟选择器（如：ul~li，div~p）

 以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)

 8、全局选择器

以*开头(星号标在大括号前，修饰了包含body所有的标签)

 9、并集选择器（如：ul，li  , div，p）

 以，分隔(逗号分隔开需要修饰的模块名)

 10、属性选择器

属性选择器的5种写法：
（1）[属性名] 选择含有指定属性的元素。

p[title]{
    color: orange;
}

（2）[属性名=属性值] 选择含有指定属性和属性值的元素。

p[title=abc]{
    color: orange;
}

（3）[属性名^=属性值] 选择属性值以指定值开头的元素。

p[title^=abc]{
    color: orange;
}

（4）[属性名$=属性值] 选择属性值以指定值结尾的元素。

p[title&=abc]{
    color: orange;
}

（5）[属性名*=属性值] 选择属性值中含有某值的元素的元素。
 

p[title*=e]{
    color: orange;
}

11、伪类选择器，伪元素选择器

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:hover	a:hover	把鼠标放在链接上的状态（任何标签） hover可以使用在任何元素上
:active	a:active	选择正在活动链接
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行​​​​​​​
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素 (IE>=7)
:last-child	p:last-child	选择器匹配属于任意元素的最后一个子元素 (IE>=9)
::before	p::before	在每个<p>元素之前插入内容
::after	p::after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始

      :not() 选择器选取除了指定元素以外的所有元素

p:not(.intro){
backgroundcolor：yellow
}
<h1>欢迎来到我的主页</h1>
<p class="intro">除去此元素其余元素改变背景</p>
<p>学的不仅是技术，更是梦想！</p>
<p>学的不仅是技术，更是梦想！</p>

如有不对的地方请在下方评论区留言，欢迎补充