87_css笔记3_css的选择器

最新推荐文章于 2024-04-20 05:49:50 发布

✅_蜡笔小新_✅

最新推荐文章于 2024-04-20 05:49:50 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/a_horse/article/details/84104369

版权

一，标签选择器


标签选择器定义：
  <style>
        p{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
使用：
<p>我是段落</p>
<h1>我是标题</h1>

根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中
只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

二，id选择器和class选择器

选择器的定义
 <style>
//id选择器定义
        #identity1{
            color: red;
        }
//class选择器定义
          .pp{
            color: red;
        }
 </style>


选择器的使用：
<p id="identity1">按时上下班</p>
<p class="pp">按时上下班</p>

1，id选择器

id选择器是根据指定的id名称找到对应的标签, 然后设置属性
每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
在同一个界面中id的名称是不可以重复的
在编写id选择器时一定要在id名称前面加上#
id的名称是有一定的规范的
id的名称只能由字母/数字/下划线
a-z 0-9 _
id名称不能以数字开头
id名称不能是HTML标签的名称
不能是a h1 img input ...
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

2，class选择器：

class选择器指根据指定的类名称找到对应的标签, 然后设置属性
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
在同一个界面中class的名称是可以重复的
在编写class选择器时一定要在class名称前面加上.
类名的命名规范和id名称的命名规范一样
类名就是专门用来给CSS设置样式的
在HTML中每个标签可以同时绑定多个类名，格式如下
正确的写法:<标签名称 class="类名1 类名2 ...">
错误的写法:<p class="para1" class="para2">

3，id选择器和class选择器的区别

id相当于人的身份证不可以重复，class相当于人的名称可以重复
一个HTML标签只能绑定一个id名称，一个HTML标签可以绑定多个class名称
id选择器是以#开头，class选择器是以.开头
应用场合：id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式，一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

三，后代选择器和子元素选择器

//标签的定义
 <style>

//后代选择器的定义
       div ul li p{
            color: red;
        }
//子元素选择器的定义
        div>ul>li>p{
            color: purple;
        }
</style>

//后代选择器的使用
<div >
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <div >
            <p>我是段落</p>
            </div >
        </li>

    </ul>
</div>

//子选择器的使用
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

1，后代选择器

后代选择器就是找到指定标签的所有特定的后代标签, 设置属性
后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
后代选择器可以通过空格一直延续下去

2，子选择器

子选择器就是找到指定标签中所有特定的直接子元素, 然后设置属性
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器可以通过>符号一直延续下去

3，后代选择器和子选择器的区别

后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选，子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
实际应用：如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器，如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

4，后代选择器和子选择器的相同点：

后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去，选择器1>选择器2>选择器3>选择器4{}

四，交集选择器和并集选择器

//交集选择器和并集选择器的定义
 <style>
    //交集选择器
    .para1#identity{
            color: blue;
        }
    //并集选择器
     .ht,.para{
            color: red;
        }
 </style>

//交集选择器的使用
<p class="para1" id="identity">我是段落</p>

//并集选择器的使用
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>

1，交集选择器

交集选择器就是给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器和选择器之间没有任何的连接符号
选择器可以使用标签名称/id名称/class名称
交集选择器仅仅作为了解, 企业开发中用的并不多

2，并集选择器

并集选择器就是给所有选择器选中的标签设置属性
并集选择器必须使用,来连接
选择器可以使用标签名称/id名称/class名称

五，兄弟选择器

//兄弟选择器的定义
<style>
    //相邻兄弟选择器的定义
        h1+p{
            color: red;
        }

    //通用兄弟选择器的定义
        h1~p{
            color: green;
        }
    </style>

//相邻兄弟选择器的使用
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>

//通用兄弟选择器的使用
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>

1，相邻兄弟选择器

相邻兄弟选择器，就是给指定选择器后面紧跟的那个选择器选中的标签设置属性
相邻兄弟选择器必须通过+连接
相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2，通用兄弟选择器

通用兄弟选择器，就是给指定选择器后面的所有选择器选中的所有标签设置属性
通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

六，序选择器

//序选择器的定义
   <style>

        p:first-child{
            color: red;
        }
  </style>

//序选择器的使用
<p>我是项目</p>

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

注意点: 不区分类型
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)：x和y是用户自定义的, 而n是一个计数器, 从0开始递增

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

七，属性选择器

//属性选择器的定义
  <style>

        p[id]{
            color: red;
        }

        p[class=cc]{
            color: blue;
        }
  </style>

//属性选择器的使用
    <p id="identity1">我是段落1</p>
    <p id="">我是测试1</p>
    <p class="cc">我是段落3</p>

属性选择器，就是找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性：
定义：input[type=password]{}
使用<input type="text" name="" id="">；<input type="password" name="" id="">
属性选择器的特殊筛选
//属性选择器的定义
 <style>
 //CSS3中image标签的alt属性，以abc开头
        img[alt^=abc]{
            color: red;
        }
        
         //CSS2中
        img[alt|=abc]{
            color: red;
        }

   //CSS3中image标签的alt属性，以abc结尾
        img[alt$=abc]{
            color: blue;
        }


    //CSS3中image标签的alt属性，包含abc
        img[alt*=abc]{
            color: red;
        }
        //CSS2中
        img[alt~=abc]{
            color: red;
        }

    </style>

//属性选择器的使用
<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">
属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:CSS2中的只能找到value开头,并且value是被-和其它内容隔开的，CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的
[attribute$=value] CSS3
属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的，CSS3中的只要包含value就可以找到

八，通配符选择器

//通配符选择器的定义和使用
   <style>
      
        *{
            color: red;
        }
    </style>

<h1>我是标题</h1>

通配符选择器是设置界面上所有的标签的属性,
所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

✅_蜡笔小新_✅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫