第十章 CSS选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>选择器</title>
    <style media="screen">
      /*p{
        color: red;
      }*/
      /*h1{
        color: green;
      }*/
      /*#pID1{
        color:blue;
      }*/
      /*#pID2{
        color:red;
      }*/
      /*#pID3{
        color:green;
      }*/
      /*#pID4{
        color:purple;
      }*/
      /*.pClass1{
        color:green;
      }*/
      /*.pClass2{
        color: brown;
      }*/
      /*.pDoubleClass1{
        color: blue;
      }*/
      /*.pDoubleClass2 {
        font-size: 30px;
      }*/

      /*.colorR{
        color: brown;
      }
      .size30{
        font-size: 30px;
      }
      .line {
        text-decoration: underline;
      }*/

      /*div p{
        color: purple;
      }*/
      /*div .divullipClass{
        color: purple;
      }*/
      /*div ul li p{
        color: brown;
      }*/
      /*div .divPClass{
        color: green;
      }*/
      /*div>p{
        color: purple;
      }*/
      /*div>ul>li>p{
        color: green;
      }*/


      /*p#npId{
        color: brown;
      }*/
      /*p.npClass{
        color: brown;
      }*/

      /*h2,p{
        color: purple;
      }*/
      /*.upClass,.uhClass {
        color: purple;
      }*/

      /*h2+p{
        color: green;
      }*/

      /*p:first-child {
        color: red;
      }*/
      /*p:first-of-type {
        color:red;
      }*/
      /*p:last-child {
        color: green;
      }*/
      /*p:last-of-type {
        color: purple;
      }*/
      /*p:nth-child(3) {
        color: red;
      }*/
      /*p:nth-of-type(3) {
        color: green;
      }*/
      /*p:nth-last-child(3){
        color: red;
      }*/
      /*p:nth-last-of-type(2){
        color: green;
      }*/
      /*p:only-child {
        color: green;
      }*/
      /*p:only-of-type {
        color: red;
      }*/

      /*p:nth-child(odd) {
        color: red;
      }
      p:nth-child(even) {
        color: blue;
      }*/
      /*p:nth-of-type(odd) {
        color: blue;
      }*/
      /*p:nth-child(2n+0){
        color: green;
      }*/

      /*p[id]{
        color: red;
      }*/
      /*p[class="pClass"] {
        color: green;
      }*/
      /*img[alt|=abc]{
        color: green;
      }*/
      /*img[alt^=abc]{
        color: red;
      }*/
      /*img[alt$=abc]{
        color: purple;
      }*/
      /*img[alt~=abc]{
        color: red;
      }*/
      /*img[alt*=abc]{
        color: blue;
      }*/
      /**{
        color: red;
      }*/

      /*p{
        color: red;
      }*/
      /*#pId1 {
        color: red;
      }
      #pId2 {
        color: red;
      }*/
      /*.pClass{
        color: red;
      }*/
      /*div p{
        color: red;
      }*/
      /*div>p{
        color: red;
      }*/
      /*p.pClass{
        color: red;
      }*/
      /*#pId2,#pId1 {
        color: red;
      }*/
      /*h2~p{
        color: red;
      }*/
      /*p:nth-child(n+0) {
        color: red;
      }*/
      /*[id]{
        color: red;
      }*/
      [class="pClass"]{
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- <p>我是段落</p>
    <ul>
      <li>
        <ul>
          <li><p>我是段落</p></li>
        </ul>
      </li>
    </ul> -->

    <!-- <h1>我是标题</h1>

    <p id="pID1">id段落1</p>
    <p id="pID2">id段落2</p>
    <p id="pID3">id段落3</p>
    <p id="pID4">id段落4</p> -->


    <!-- <p class="pClass1">pClass1段落1</p>
    <p class="pClass1">pClass1段落2</p>
    <p class="pClass2">pClass2段落3</p>
    <p class="pClass2">pClass2段落4</p>
    <p class="pDoubleClass1 pDoubleClass2">pDoubleClass1段落4</p>
    <p class="pDoubleClass1 pDoubleClass2">pDoubleClass2段落5</p> -->


    <!-- <p class="colorR size30">第一行文字</p>
    <p class="size30 line">第二行文字</p>
    <p class="colorR line">第三行文字</p> -->


    <!-- <div id="divID" class="divClass">
      <p class="divPClass">div 我是段落</p>
      <p>div 我是段落</p>
      <ul>
        <li>
          <p id="divullipId" class="divullipClass">div ul li 我是段落</p>
        </li>
        <li>
          <p id="divullipId" class="divullipClass">div ul li 我是段落</p>
        </li>
      </ul>
    </div> -->

    <!-- <p>交集选择器段落1</p>
    <p id="npId" class="npClass">交集选择器段落2</p>
    <p class="npClass">交集选择器段落3</p>
    <p>交集选择器段落4</p> -->

    <!-- <h2 class="uhClass">并集选择器标题</h2>
    <p class="upClass">并集选择器段落1</p>
    <p >并集选择器段落2</p>
    <p >并集选择器段落3</p>
    <p>并集选择器段落4</p> -->

    <!-- <h2>兄弟选择器标题</h2>
    <a href="#">我是连接</a>
    <p>兄弟选择器段落1</p>
    <p >兄弟选择器段落2</p>
    <a href="#">我是连接</a>
    <p >兄弟选择器段落3</p>
    <p>兄弟选择器段落4</p>

    <h2>兄弟选择器标题</h2>
    <p>兄弟选择器段落1</p>
    <p >兄弟选择器段落2</p>
    <p >兄弟选择器段落3</p>
    <p>兄弟选择器段落4</p> -->

    <!-- <h2>序选择器1</h2>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <hr>
    <div class="">
      <p>我是段落5</p>
      <p>我是段落6</p>
      <p>我是段落7</p>
      <p>我是段落8</p>
    </div> -->

    <!-- <h2>序选择器1</h2>
    <p>我是段落1</p>
    <hr>
    <div class="">
      <p>我是段落5</p>
    </div> -->

    <!-- <h2>序选择器2</h2> -->
    <!-- <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p> -->

    <!-- <h2>属性选择器</h2>
    <p id="pID1" class="pClass">我是段落1</p>
    <p class="pClass">我是段落2</p>
    <p id="pID3" class="pClass">我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <p class="pClass">我是段落6</p>
    <p>我是段落7</p>
    <p id="pID8">我是段落8</p> -->

    <!-- <img src="" alt="abcmmmwww">
    <img src="" alt="abc mmm www">
    <img src="" alt="abc-mmm-www">
    <img src="" alt="wwwmmmabc">
    <img src="" alt="www mmm abc">
    <img src="" alt="www-mmm-abc">
    <img src="" alt="wwwabcmmm">
    <img src="" alt="www abc mmm">
    <img src="" alt="www-mmm-abc"> -->

    <!-- <h2>通配符选择器</h2>
    <p>段落</p>
    <a href="#">我是连接</a> -->

    <div class="">
      <h2>选择器练习</h2>
      <p id="pId1" class="pClass">我是段落1</p>
      <p id="pId1" class="pClass">我是段落2</p>
    </div>
  </body>
</html>

第六十五课 标签选择器

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
格式：

标签名称{
属性:值;
}

注意点：

1、标签选择器选中的是当前界面中的所有的标签，而不是单独选中某一个标签
2、标签选择器无论标签藏的多深都能选中
3、只要是HTML中的标签就可以作为标签选择器（h/a/img/ol/dl/input...）

第六十六课 id选择器

id选择器：根据指定的ID名称找到对应的标签，然后设置属性
格式：

#id名称{
  属性：值；
}

注意点

1、每个HTML标签都有一个属性叫做id,也就是说每个标签都可以设置id
2、同一个界面中ID的名称是不可以重复的
3、编写id选择器一定要在id名称前面加上#
4、id的名称只能由字母／数字、下划线
id名称不能以数字开头
id名称不能是Html标签的名称
在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用ID，因为在前端开发中ID是留给js使用的

第六十七课 类选择器

class选择器：根据指定的类名称找到对应的标签，然后设置属性
格式

.类名 {
属性：值；
}

注意点

1、每个HTML标签都有一个属性叫做class,也就是说每个标签都可以设置class
2、同一个界面中class的名称是可以重复的
3、编写id选择器一定要在class名称前面加上.
4、class命名规范和id一样
5、class就是专门给某个特定的标签设置样式的
6、在HTML中每个标签可以同时绑定多个类名

格式

<标签名称 class=“类名1 类名2 。。。”>
错误写法
<标签名称 class=“类名1” class=“类名2”>

第六十八课 id选择器和类选择器

区别

id相当于人的身份证不可以重复；class相当于人的名字可以重复；
一个HTML标签只能绑定一个id名称；一个HTML标签可以绑定多个class名称；
id选择器以#开头；class选择器以.开头；
id一般情况下是给js使用的，所以除了特殊情况否则不要使用id设置样式
对类的使用可以看出一个开发人员的技术水平
一般情况下企业开发中要注意代码冗余的抽取，可以将一些公共的代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可

第六十九课 后代选择器

后代选择器：找到指定标签的所有后代标签，设置属性
格式：

标签名称1 标签名称2 ... {
属性：值；
}
先找到标签名称1的标签，再找到标签名称2的标签，然后设置属性

注意点：

后代选择器必须用空格隔开
后代不仅是儿子，还包括孙子。。。，只要放在这个标签中，都是他的后代
后代选择器不仅可以使用标签名称，还可以使用其他选择器
后代选择器可以通过空格一直延续下去

第七十课 子元素选择器

子元素选择器：找到指定的标签中所有特定的直接子元素，然后设置属性
格式

标签名称1>标签名称2{
属性：值；
}
先找到名称叫做标签名称1的标签，然后在这个标签中找到所有直接子元素名称为标签2的元素

注意点

1、子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2、子元素选择器之间需要用>符号链接，并且不能有空格
3、子元素选择器不仅可以使用标签名称，还可以使用其他选择器
4、子元素选择器可以通过>符号一直延续下去

第七十课 后代选择器和子元素选择器

区别

后代选择器使用空格作为连接符号；后代选择器会选中指定标签中所有的特定后代标签，
同时选中儿子／孙子。。。，只要是被放到指定标签中的特定标签都会被选中
子元素选择器使用>作为连接器；子元素选择器只会选中指定标签中，所有的特定的直接标签，只有儿子标签
共同点：
都可以使用标签／id名称／class名称来作为选择器；
都可以通过各自的连接符号一直延续下去

在企业开发中如何选择

如果想选中标签中所有的特定的标签，那么就使用后代选择器；
如果只想选中指定标签中的所有特定儿子标签就使用子元素选择器

第七十二课 交集选择器

交集选择器：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：

选择器1选择器2{
属性：值；
}

注意点

1、选择器之间没有任何连接符号
2、选择器可以使用标签名称／id名称／class名称
3、交集选择器在企业开发中用的并不多

第七十三课 并集选择器

作用：给所有选择器选中的标签设置属性
格式：

选择器1，选择器2{
属性：值；
}

注意点：

1、并集选择器必须使用，来连接
2、选择器可以使用标签名称／id名称／class名称

第七十四课 兄弟选择器

相邻兄弟选择器 CSS2
作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式

选择器1+选择器2{
属性：值；
}

注意点

1、相邻兄弟选择器必须通过+连接
2、相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

通用兄弟选择器 CSS3
作用：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：

选择器1~选择器2{
属性：值；
}

注意点：

1、通用兄弟选择器必须用~连接
2、通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中

第七十五课 序选择器上

CSS3中新增的选择器最具有代表性的就是序选择器
1、同级别的第几个 不区分类型

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

2、同类型的第几个

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

第七十六课 序选择器下

:nth-child(odd) 选中同级别中的所有奇数(odd)
:nth-child(even)选中同级别中的所有偶数(even)
:nth-child(xn+y)
x和y是用户自定义的，n是一个计数器，从0开始递增

第七十七课 属性选择器

格式：

[attribute]
作用：根据指定的属性名称找到对应的标签，然后设置属性

[attribute=value]
作用：找到有指定属性，并且属性的取值等于value的标签，然后设置属性

最长见的场景：区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

第七十八课 属性选择器下

1、属性的取值是以什么开头的

[attribute|=value] CSS2只能找到value开头，并且是被-和其他内容隔开的
[attribute^=value] CSS3只要是以Value开头的都可以找到，无论用何种方式隔开

2、属性的取值是以什么结尾的

[attribute$=value] CSS3

3、属性的取值是否包含某个特定的值

[attribute~=value] CSS2只能找到包含value，并且是以空格隔开的
[attribute*=value] CSS3只要包含Value都可以找到

第七十九课 通配符选择器

作用：给当前界面上所有的标签设置属性

格式：
*{
属性：值；
}

注意点：

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

第八十课 选择器练习

用学过的选择器，设置p标签内容为红色

<div class="">
<h2>选择器练习</h2>
<p id="pId1" class="pClass">我是段落1</p>
<p id="pId1" class="pClass">我是段落2</p>
</div>

内容参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,833评论 19赞 139
  • 5.31 css选择器-三大特性
    CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 3,462评论 0赞 0
  • 10-CSS基础-CSS选择器
    CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    极客江南阅读 14,038评论 10赞 109
  • 曲阜和唱歌
    虾：我们可以去曲阜唱歌，估计很便宜，上次我们在山西才一块钱blabla.... 时间倒回两千年....... 孔子...
    一位贵宾狗阅读 1,301评论 0赞 1
  • 关于iOS的一些乱七八糟
    Xcode离线文档下载地址https://developer.apple.com/library/download...
    WarMap阅读 1,270评论 0赞 0

友情链接更多精彩内容