CSS选择器介绍
2019-03-22 本文已影响0人
依风伴雨
写给正在学习选择器的小伙伴们！
不懂的可以加我联系方式，一起讨论！
QQ：951434130
序选择器很重要，学习时记得不懂的查MDN，或者W3C官方文档，因为序选择器有些我的理解也不是很对
标签选择器
- 注意点：
- 根据指定标签名称，在当界面中找到指定标签的所以标签，然后设置属性
- 无论标签藏得多深都能找到选中
- 不能单独选中某个标签，如果使用标签选择器，那样同名标签都会被设值，例如p标签，当使用标签选择器时，当前页面所有p标签都会被设值
<style>
p{
color: green;
}
</style>
id选择器
- id选择器是根据指定的id名称找到对应的标签, 然后设置属性
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id，为什么？因为在前端开发中id是留给js使用的
<style>
#id1{
color: green;
}
</style>
注意点：
- 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
- 在同一个界面中id的名称是不可以重复的
- 在编写id选择器时一定要在id名称前面加上#
- id的名称是有一定的规范的
- 1 id的名称只能由字母/数字/下划线a-z 0-9 _
- 2 id名称不能以数字开头
- 3 id名称不能是HTML标签的名称不能是a h1 img input ...
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
以上这段注意点是来自我老师 李南江的解答！
类选择器
- 选择指定设置过后的类名，找到对应的标签，然后设置属性
<style>
.header{
color: green;
}
</style>
注意点：
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式:<标签名称 class="类名1 类名2 ...">
错误写法：<p class="para1" class="para2">
以上这段注意点是来自我老师 李南江的解答！
交集选择器
交集选择题的注意点？
1 .选择器和选择器之间没有任何的连接符号
2 .选择器可以使用标签名称/id名称/class名称
3 .交集选择器仅仅作为了解, 企业开发中用的并不多
4 .交集选择器是给所有选择器选中的标签中, 相交的那部分标签设置属性
- 格式：
<style>
.para1#identity{
color: blue;
}
</style>
并集选择器
什么是并集选择器?
1 .给所有选择器选中的标签设置属性
2 .并集选择器必须使用,来连接
3 .选择器可以使用标签名称/id名称/class名称
- 格式：
<style>
.ht,.para{
color: red;
}
</style>
兄弟选择器
相邻兄弟选择器 CSS2
1 .给指定选择器后面紧跟的那个选择器选中的标签设置属性
2 .相邻兄弟选择器必须通过+连接
3 .相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
- 格式：
<style>
h1+p{
color: red;
}
</style>
通用兄弟选择器 CSS3
给指定选择器标签后面的所有选择器标签选中设置属性
1 .通用兄弟选择器必须用~连接
2 .通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
- 格式：
<style>
h1~p{
color: red;
}
</style>
序选择器
:first-child
- 选中同级别中的第一个标签
- 例如div下面的四个p标签，但是只选择同级别的第一P标签设置属性，其余三个没有任何变化，就算是div外层还是有两个p标签，那样也是只有外层第一个p标签和div里的第一个p标签会被设置属性，变化
- 注意点：如果同级别的第一个p标签前面有其他标签，那样那个p标签就没有作用了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<p>我是段落2</p>
<p>我是段落4</p>
<p>我是段落5</p>
</div>
</body>
</html>
-
效果如下
效果图
:last-child
- 选中同级别中的最后一个标签
- 顾名思义与上一段话一样，就是选中同级别中最后一个标签才会有效果，例如一下代码，第一级别是p和div，第一级别的同级别最后一个标签不是p标签，所以他没有生效，会往二级标签里继续查找，div里的二级同级别标签，最后一个刚好是p标签所以他生效了，相反，如果第一级别同级别最后一个是标签是p而不是div时，他就会在第一级别时生效了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:last-child{
color: red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<p>我是段落3</p>
<p>我是段落4</p>
</div>
</body>
</html>
-
效果如下
效果图
效果图
:nth-child(n)
- 选中同级别中的第n个标签
- :nth-child(n)里的n是自己输入的几位数，如果html页面里有五个p标签，那样你输入3:nth-child(3)他就会给正序第三个p设置属性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:nth-child(3){
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
效果图
:nth-last-child(n)
- 选中同级别中的倒数第n个标签
- nth-last-child(n)里的n是自己输入的几位数，如果html页面里有五个p标签，那样你输入3:nth-child(3)他就会给倒序第三个p设置属性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>序选择器</title>
<style>
p:nth-last-child(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
效果图
:only-child
- 选中父元素中唯一的标签
- 很好理解，选中整个页面里唯一一个元素，当一级层次有两个标签时，那样它不符合条件，所以他会转向二级，选中div里的唯一一个p，所以他div外层的p没生效就是这样子
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-child{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<div>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果图
:first-of-type
- 选中同级别中同类型的第一个标签
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
image
效果图
:last-of-type
- 选中同级别中同类型的最后一个标签
- 和:first-of-type类似，不过他选中的是同级别中的最后一个标签
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:last-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果图
:nth-of-type(n)
- 选中同级别中同类型的第n个标签
- :nth-of-type(3)如果n里写3，那样就会选中同级别正序的第三个标签
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-of-type(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果图
:nth-last-of-type(n)
- 选中同级别中同类型的倒数第n个标签
- :nth-last-of-type(n)如果n里写3，那样就会选中同级别倒序的第三个标签
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-last-of-type(3){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果图
:only-of-type
- 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素(这段话是来自w3c的描述:only-of-type选择器的)
- 个人理解:only-of-type，是选中父元素中的唯一一个子元素，多了不会生效，如果我们在div里的p下面再添加一个p，这时添加的p不会生效，并且导致div里的第一个p元素也会失去效果，代码实践最实在，看图
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:only-of-type{
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是段落</p>
<div class="header">
<p>我是段落</p>
<p>我是段落</p>
</div>
</body>
</html>
-
效果如下
在div里添加多了个p的效果图
:nth-child(xn+y)
- x和y是用户自定义的, 而n是一个计数器, 从0开始递增
- :nth-child(2n+0)，x填2时，他会从0开始，会在第二个p时开始生效，递增，每次两个，一直到结束，看代码、这里的理解看个人，我的可能是错的，如果有错请在评论区告知我，谢谢
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(2n+0){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>
-
效果如下
nth-child(2n+0)
:nth-child(even)
- 选中同级别中的所有偶数
- :nth-child(even)的效果图和上面nth-child(2n+0）一样，我就不重新截图了
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(even){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>
-
效果如下
image
:nth-child(odd)
- 选中同级别中的所有奇数
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:nth-child(odd){
color: #8d28ff;
}
</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>
-
效果如下
image
属性选择器
[attribute]
- 根据指定的属性名称找到对应的标签, 然后设置属性
- 把指定属性填入p[这]，例如id的话，他就会把设有id的标签给设置效果,当然你也可以填写class
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[id]{
color: red;
}
</style>
</head>
<body>
<p id="id1">我是段落</p>
<p id="id2">我是段落</p>
<p>我是段落</p>
<p id="id3">我是段落</p>
<p>我是段落</p>
<p id="id4">我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
image
[attribute=value]
- 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
- [attribute=value]最常见的应用场景, 就是用于区分input属性
- input[type=password]找到指定的input的type属性，再找到指定的type属性的取值password，然后设置属性
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=password]{
border:2px solid;
border-radius:25px;
}
</style>
</head>
<body>
<input type="password">
</body>
</html>
-
效果如下
image
属性的取值是以什么开头的
[attribute|=value] CSS2
- CSS2中的只能找到value开头,并且value是被-和其它内容隔开
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt|=abc]{
color: red;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
</body>
</html>
-
效果如下
image
[attribute^=value] CSS3
- CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt^=abc]{
color: red;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
属性的取值是以什么结尾的
[attribute$=value] CSS3
- CSS3中的只要是以value结尾的都可以找到, 无论有没有被-隔开
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt$=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
- CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
- 只能找到被空格隔开的
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt~=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
[attribute*=value] CSS3
- CSS3中的只要包含value就可以找到
- 不区分空格横杠连接
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img[alt*=abc]{
color: skyblue;
}
</style>
</head>
<body>
<img src="" alt="abcdef">
<img src="" alt="abc-www-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
</body>
</html>
-
效果如下
image
通配符选择器
- 给当前界面上所有的标签设置属性
- 注意点：由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
- 格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: deeppink;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
-
效果如下
image
