2-选择器

1-规则结构
h1 {color:red; border:red 1px solid;}
PS：
(1)-h1部分是选择器
(2)- {}部分是一个声明块。Color:red 是一条声明，声明由属性、冒号、值(由1个以上关键字组成，关键字之间用空格分隔)、分号组成。

2-元素选择器
PS:p{}是元素选择器、*{}是通配选择器、 p,h1,ul{}是选择器分组

3-类选择器
那些年，错过的大雨
那些年，错过的大雨
PS:
(1)-.a：选择class属性值有a的元素
(2)-.a.b：选择class属性值有a和b的元素
(3)-p.a.b:选择class属性值有a和b的p元素

4-ID选择器
那些年，错过的大雨
PS:
(1)-#a：选择id值为a的元素
(2)-特殊作用：可利用id选择器快速找出该元素的位置。
(3)-与类选择器的区别:
(A)-不同id属性的值必须不同，而不同class属性的值可以相同。换句话说，一个ID选择器只能对一个元素起作用，而一个类选择器可以对多个元素起作用。
(B)-若id的属性的值是多个关键词组成，则ID选择器不支持

5-属性选择器
<h1 class=“a1” id=“b1”>那些年，错过的大雨</h1>
那些年，错过的大雨
那些年，错过的大雨
PS:
(1)-根据属性选择：
(a)-[class] //选择所有含有class属性的元素
(b)-[class] [id] //选择所有含有class、id属性的元素
(c)-p[class] //选择所有含有class属性的p元素
(d)-p[class] [id] //选择所有含有class、id属性的p元素
(2)-根据属性全值选择：
(a)-[class=“值”]
(b)-[class=“值”] [id=“值”]
(c)-p[class=“值”]
(d)-p[class=“值”] [id=“值”]
(3)-根据属性某部分值选择：
(a)-[class*=“某部分值”] //选择class属性含有该部分值的元素
(b)-[class^=“某部分值”] //选择class属性以该部分值的开头元素
(c)-[class$=“某部分值”] //选择class属性以该部分值的结尾元素

6-根据文档结构选择
<body>
那些年
<a>那些年</a>
<a>那些年</a>
<q><a>那些年</a></q>
</body>
PS:元素关系
(1)-祖父-后代：以第4段落标签为例，元素上层的4个元素都是其祖父元素，后代元素同理。
(2)-父-子：略。
A-后代选择器：
PS：
(1)-p b:选择所有段落
(2)-p a b:选择后三个段落
B-子元素选择器：
PS：在不同区域，只想运用某区域的该类元素时使用。
(1)-p>b:选择第1段落
(2)-p>a>b:选择第2段落
C-相邻兄弟选择器：
PS：
(1)-p+p:选择第2.3.4段落
(2)-p+p+p:选择第3.4段落
7-伪类、伪元素选择器：
A-伪类选择器

选择器	PS：
a:link	未访问，为静态伪类
a:visited	已访问，为静态伪类
a:hover、元素:hover	鼠标悬停时，为动态伪类
a:active、元素:active	鼠标单击时，为动态伪类
输入框元素:focus	鼠标单击输入框时，为动态伪类
元素:first-child	选择有父元素且是父元素第1个子元素的元素

PS：
(1)-没有href属性的a元素是锚，有href属性的a元素才能叫链接。
(2)-运用锚伪类时，顺序为link-visited-hover-active
(3)-伪类结合使用：
a:link:hover{} //未访问的链接，当鼠标悬停时
a:visited:hover{} //已访问的链接，当鼠标悬停时
注：a:link:visited{} //该选择器无效，互斥伪类不能结合使用，浏览器会忽略。
B-伪元素选择器
p:before{content: ”!”; color:red;}
p:after{content:url(图片地址);}
PS：p:before 表示从p前面插入伪元素、 p:after 表示从p后面插入伪元素

选择器	PS：
a:link	未访问，为静态伪类
a:visited	已访问，为静态伪类
a:hover、元素:hover	鼠标悬停时，为动态伪类
a:active、元素:active	鼠标单击时，为动态伪类
输入框元素:focus	鼠标单击输入框时，为动态伪类
元素:first-child	选择有父元素且是父元素第1个子元素的元素

posted @ 2020-05-11 13:03 小白啊啊啊啊啊阅读(156) 评论(0) 收藏举报

刷新页面返回顶部

爱打球的小前端

2-选择器