通过选择器可以选中页面中的指定元素，从而为其设置样式
到了工作上一般用的外部样式表link标签引入
元素选择器
- 通过标签吗选中页面中所有元素
- 语法： 标签名
id选择器 -
image.png
一个元素可以同时指定多个class，多个class间使用空格隔开 -
image.png
属性选择器
可以根据元素的属性值来选中指定元素
title属性可以设置元素上的提示文字 -
image.png
属性选择器:
作用:根据元素的属性来选中元素
语法:
[属性名] - 选中含有某个属性的元素，只要是属性都行，不论是title，class，id都行，
[属性名]=[属性值]
选中某个属性等于某个值的元素 -
image.png
^表示以什么什么开头
$表示以什么什么结尾
表示任意位置，只要包含就行 -
image.png
语法
[属性名]
选中含有某个属性的元素
[属性名=属性值]
选中某个属性等于某个值的元素
[属性名^=属性值]
选中属性以指定内容开头的元素
[属性名$=属性值]
选中属性以指定内容结尾的元素
[属性名*=属性值]
选中属性包含指定内容的元素
复合选择器
- image.png
- 如果属性名相同，只选择一个就这样写，首先满足p元素，然后class是abc
-
image.png
交集选择器 -
image.png
交集选择器：
- 作用：可以选中同时符合多个选择器的元素
- 语法:选择器1选择器2选择器3..选择器N
- 例子:div.box1.box2,box，一般不会这样写，太麻烦了
- 注意：交集选择器有元素选择器时，必须以元素开头
选择器分组（并集选择器）
-
image.png
逗号表示或、和的意思，不写空格直接写标签名+子元素表示且的意思
关系选择器
直接被父元素所包含的元素是子元素
祖先元素
直接或间接包含后代元素的元素是祖先元素
父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素是后代元素
子元素也是后代元素
兄弟元素
拥有相同父级元素的元素
- 这种表示后代的后代，一般不写的太长，服务器会解析很慢
-
image.png
子元素选择器 -
image.png
子元素选择器，范围比较小
作用:选中指定元素的子元素
语法:父元素>子元素{
例子:div>p{} - 兄弟元素选择器，+表示下一个兄弟元素
- image.png
-
image.png
兄弟元素选择器
作用:选中指定元素的兄弟元素
语法:兄+弟{}选中下一个兄弟元素
兄~弟{}选中下边所有的兄弟元素
伪类选择器
- 写父子结构的快捷键ul>li>a
-
image.png
div.box$*3，创建三个盒子，以此类推
伪类都是以：开头 - 超链接相关的伪类：
- : link 没有访问过的链气
- : visited 访问过的链接
- : hover 鼠标移入的链接，也可以设置移入变大，设置font-size就可以了
- : active 鼠标点击的链接
一个链接是否访问过，由用户的历史记录决定，由于visited会涉及到用户的隐私，所以通过visited只能修改文字的颜色，这种效果在实际开发中使用的不多
:link和：visited是超链接独有的
:hover和:active可以适用于其他元素
结构伪类
first-child表示第一个子元素
- -
- first-of-type同类型里面的第一个
-
image.png
last-of-type同类型里面的最后一个子元素
nth-child()第n个子元素，如果写n，则n表示从0开始的整数
否定伪类
为所有的P元素设置一个红色的字体，除了class为p1的
- image.png
否定伪类:not()
- 作用：将符合条件的元素从己有元素中去除
-
image.png
- 这表示所有的子元素除了第一个 - image.png
伪元素
-伪元素用来表示一些特殊的位置
-通常伪元素需要以::开头
::selection表示被选中的内容
::first-letter表示首字母
::first-line表示文字首行
::before元素开始的位置，这是纯css添加的，不在结构里面，所以是选不中的
::after元素结束的位置
-
image.png
在before和after中可以通过content来为两个位置添加内容，
一 content中的文字必须用引号引起来。
简单用法可以在文字前面加前双引号，在文字后面加后双引号 - -
HBuilderX在运行网页时，为了使网页可以自动重新加载
所以它偷偷的在网页中添加了一些]S脚本，那么第二个p就不是最后一个元素了，可以用div包起来就可以了
<p>第一个p元素</p>
<p>第二个P元素</p>
- 这里是找p元素的，而不是找p元素的子元素，因为p是body的子元素
- image.png
