标签选择器、id选择器、群组和后代选择器、伪类选择器的简单介绍。

1.标签选择器:元素选择器

1.元素选择器/类型选择符(element选择器)
例:div{width;100px;height:100px;background:red}
语法:元素名称{属性:属性值;}如:div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li,...等等
说明:
a,元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称为选择符。例如body,div,p,img,        em,,strong,span...等等
b,所有的页面元素都可以作为选择符;
用法:
1)如果想改变某个元素的默认颜色时,可以使用类型选择符;
  (如:改变一个div,p,h1样式 )
2)当统一文档某个元素的显示效果时,可以使用类型选择符
  (如:改变文档所有p段落样式)

2.标签选择器:class选择器/类选择器

语法:class名{属性:属性值;}
说明:
a)当我们使用class选择符,应先为美国元素定义一个class名称
b)class选择符的语法格式是:
如:<div class="top"></div>
.top{
width:200px;height:100px;bakground:green;
}
用法:class选择符跟适合定义一类样式
​
<style>
      .ezr{
         color: brown;
      }
      .top{
          background-color: blue;
          color: aliceblue;
      }
  </style>
    <div class=" top ezr">1111div</div>
    <div class="ezr">222</div>
    <div>333</div>
    <div>444</div>
优先显示顺序看style的排列顺序,与标签内类别排列顺序无关

3.id选择器

语法:#id名{属性:属性值;}
​
说明:
a)当我们使用id选择符时,应为每一个元素定义一个id属性
如:<div id="box"></div>
b)id选择符的语法格式是"#"加上自定义的id名
如:#box{
width:300px;height:300px;
}
c)起名时只能对应文档中的一个具体元素对象。(唯一性)

4.通配符/通配选择器

语法:*{属性:属性值;}
说明:通配符的写法是"*",含义就是所有元素。
*{
margin:0;padding:0;
}
margin 外边距    padding 内边距

9.群组和后代选择器

1.群组选择器

语法:选择符1,选择符2,选择符3...{属性:属性值;}例:#top,#nv1,h1{width:960px;}
说明:当有多个选择符应用相同声明时,可以将选择符用","分隔的方式,合并为一组
margin:0 auto;实现盒子的水平居中

2.包含选择器/后代选择器 子代选择器

语法:选择符1 选择符2{
属性:属性值;
}
​
说明:含义就是选择符1中包含的所有选择符2;
​
用法:当我的元素存在父级元素的时候,我要改变直接本身的样式,可以另加选择符,直接用包含选择器的方式解决。
​
如:结构<ul class="ezr">
    <li></li>
    <li></li>
    <li></li>
</ul>
​
.ezr li{
background:red;
}
子代选择器   
例如:ul>li{}

5.伪类选择器

语法:
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停,即鼠标滑过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
link--visited--hover--active。
说明:
a)当这4个超链接伪类选择器联合使用时,应注意他们的顺序,正常的顺序为
link--visited--hover--active。
B)为了简化代码可以把伪类选择符中相同的声明提出来访者a选择符中;
例如:a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样,鼠标滑过的状态和点击时一样
取消下划线:text-decoration: none;
​
​
元素类型必须一样
- ele:first-child{ } 选择一组相同元素中的第一个元素
​
- ele:last-child{ } 选择一组相同元素中的最后一个元素
​
- ele:nth-child(n){ } 选择一组相同元素中的第n个元素,n可以是数值、关键词、表达式
​
  - 数值
  - 关键词:odd(奇数)|even(偶数)
  - 表达式:2n(偶数)|2n+1(奇数)
​
  **备注: 以上元素类型必须一样** 
​
  顺序是从上往下数
​
​
    /* 
    first   第一个
    child  孩子、元素
    */
    /* 选择.wrap里的 div标签中的第一个 */
    .wrap div:first-child {
      background-color: tomato;
    }
​
​
    /* 选择.wrap里的 div标签中的最后一个 */
    /* 
    last  最后一个
     */
    .wrap div:last-child {
      background-color: orange;
    }
​
​
    /* 选择.box里p标签中的第一个p标签 */
    .box p:first-child {
      background-color: yellow;
    }
​
    /* 选择.box里p标签中的最后个p标签 */
    .box p:last-child {
      background-color: yellowgreen;
    }
​
​
    /* 第几个 ele:nth-child(n){ } 选择一组相同元素中的第n个元素,
    n可以是数值、关键词、表达式 */
    /* 
    nth-child :第几个孩子
    ()写数字
​
     */
​
    /* 选择.wrap里div标签中的第2个div标签 */
    /* 第2个 */
    .wrap div:nth-child(2) {
      background-color: purple;
    }
​
    /* 第5个 */
    .wrap div:nth-child(5) {
      background-color: purple;
    }
​
    /* 选择.box里p标签中的第3个p标签 */
    .box p:nth-child(3) {
      color: tomato;
    }
​
​
 /* 顺序中单数p标签 背景色红色 */
    /* 关键词 */
    /* odd奇数 */
    .wrap p:nth-child(odd) {
      /* background-color: red; */
    }
​
    /* 顺序中偶数p标签 背景色蓝色 */
    /* even偶数 */
    .wrap p:nth-child(even) {
      /* background-color: blue; */
    }
​
​
    /* 表达式 */
    /* 顺序中单数p标签 背景色红色 */
    /* 2n+1奇数 */
    .wrap p:nth-child(2n+1) {
      background-color: red;
    }
​
    /* 顺序中偶数p标签 背景色蓝色 */
    /* 2n偶数 */
    .wrap p:nth-child(2n) {
      background-color: blue;
    }
元素类型可以不一样
​
- ele:first-of-type 选择一组元素中特定类型的第一个子元素
- ele:last-of-type 选择一组元素中特定类型的最后一个子元素
- ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素
​
  顺序是从上往下数
​
**备注 : 以上元素类型可以不一样** 
​
​
了解:
child一组与of-type一组的区别
​
- nth-child强调结构关系,查找子元素中的第几个
- nth-of-type强调类型,查找类型中的第几个
​
​
​
/* 选择.wrap元素中 p标签类型中的第一个元素 */
    /*
     type 类型
    
    */
    .wrap p:first-of-type {
      background-color: tomato;
    }
​
    /* 选择.wrap元素中 h2标签类型中的第一个元素 */
    .wrap h2:first-of-type {
      background-color: yellow;
    }
​
    /*
    选不上  类型不一样
     .wrap h2:first-child {
      background-color: yellow;
    } 
    */
    /* 选择.wrap元素中 sapn标签类型中的第一个元素 */
    .wrap span:first-of-type {
      background-color: purple;
    }
​
    /*
      选不上  类型不一样
     .wrap span:first-child {
      background-color: purple;
    }
     */
​
​
    /* 选择.wrap元素中 sapn标签类型中的最后一个元素 */
    .wrap span:last-of-type {
      font-size: 50px;
    }
​
    .wrap p:last-of-type {
      color: aqua;
    }
​
    .wrap h2:last-of-type {
      color: yellowgreen;
    }
​
​
    /*  选择.wrap元素中 sapn标签类型中第2个span元素 */
    .wrap span:nth-of-type(2) {
      color: brown;
    }
​
    .wrap span:nth-of-type(3) {
      color: tomato;
    }
​
    .wrap h2:nth-of-type(1) {
      color: tomato;
    }- ele:first-of-type 选择一组元素中特定类型的第一个子元素
- ele:last-of-type 选择一组元素中特定类型的最后一个子元素
- ele:nth-of-type(n){ } 选择一组元素中特定类型的第n个ele元素
​
  顺序是从上往下数
​
**备注 : 以上元素类型可以不一样** 
​
​
了解:
child一组与of-type一组的区别
​
- nth-child强调结构关系,查找子元素中的第几个
- nth-of-type强调类型,查找类型中的第几个
​
​
​
/* 选择.wrap元素中 p标签类型中的第一个元素 */
    /*
     type 类型
    
    */
    .wrap p:first-of-type {
      background-color: tomato;
    }
​
    /* 选择.wrap元素中 h2标签类型中的第一个元素 */
    .wrap h2:first-of-type {
      background-color: yellow;
    }
​
    /*
    选不上  类型不一样
     .wrap h2:first-child {
      background-color: yellow;
    } 
    */
    /* 选择.wrap元素中 sapn标签类型中的第一个元素 */
    .wrap span:first-of-type {
      background-color: purple;
    }
​
    /*
      选不上  类型不一样
     .wrap span:first-child {
      background-color: purple;
    }
     */
​
​
    /* 选择.wrap元素中 sapn标签类型中的最后一个元素 */
    .wrap span:last-of-type {
      font-size: 50px;
    }
​
    .wrap p:last-of-type {
      color: aqua;
    }
​
    .wrap h2:last-of-type {
      color: yellowgreen;
    }
​
​
    /*  选择.wrap元素中 sapn标签类型中第2个span元素 */
    .wrap span:nth-of-type(2) {
      color: brown;
    }
​
    .wrap span:nth-of-type(3) {
      color: tomato;
    }
​
    .wrap h2:nth-of-type(1) {
      color: tomato;
    }
​
​
​
css伪元素
   /* 在h2标签之前创建伪元素 */
    h2::before {
      /* content :内容 */
      content: '我请你吃饭,';
      /* 创建出来的元素是行级标签,不能设置宽高 */
      width: 200px;
      height: 100px;
      background-color: aqua;
      color: tomato;
​
      /* 转成块级标签 */
      display: block;
    }
​
    /* 在h2标签之后创建伪元素 */
    h2::after {
      content: '你好';
      color: yellow;
    }
  </style>
​
​
  <!-- 
  
用css语言创造出来的标签
​
伪元素创造的标签是行级标签
   -->
​
  <!-- 我请你吃饭, -->
  <!-- (余生留给你) -->
  <h2>吃鱼,我吃鱼头,你吃鱼身</h2>
​
  <!-- 2)如何创建伪元素
​
  - element::before{ content:"伪元素的文本内容"; 属性名: 属性值; }
  element元素内部,内容之前,添加“伪元素的文本内容”
  - element::after{ content:"伪元素的文本内容"; 属性名: 属性值; }
  element元素内部,内容之后,添加“伪元素 -->
  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

给予546

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值