2020-11-29

1、关系选择器

首先,先了解有几种关系:

  1. 父元素:直接包含子元素的元素
  2. 子元素:直接被父元素包含的元素
  3. 祖先元素:直接或间接的包含后代元素的元素;所以父元素也是祖先元素
  4. 后代元素:直接或间接被祖先元素包含的元素;子元素也是后代元素
  5. 兄弟元素:拥有相同父元素的元素

1、子元素选择器:

作用:选中指定父元素包含的子元素

语法:父元素>子元素{}

2、后代元素选择器:

作用:选中指定元素内的后代元素

语法:祖先 后代{}  (中间是用空格隔开的)

3、兄弟选择器

作用:选中下一个兄弟

语法:前一个+后一个{}  (注意它们是连在一起的,如果中间隔着其他的元素,将不会生效)

作用:选择下边的所有兄弟

语法:兄~弟{}   (注意,这种情况下,隔着其他的元素也会起作用,但是两种方法都是选择后边的)

<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>

         div.test>span{color:cadetblue;}
         /* 如果有两个div咋办,用到上次说到的类选择器 ,就可以指定了*/



         div span{color:orange;}
         div>p>span{font-size: 30px;}

 
            p+span{font-size: 30px;}
            p~span{font-size: 40px;}
    </style>
</head>
<body>
    
     <h1>各种选择器是可以混合使用的</h1>
    <div class="test">
        我是一个div
        <p>我是div中的P元素
            <span>我是p中的span</span>
        </p>
        <div>这是一个测试的div</div>
        <span>我是div中的span</span>
        <span>我是div中的span</span>
        <span>我是div中的span</span>
    </div>

    <div class="tt">
        <span>我是另一个div中的span</span>
    </div>
</body>

2、属性选择器

  1. [属性名]{}  选择含有指定属性名的元素
  2. [属性名=属性值]{}  选择指定属性名指定属性值的元素
  3. [属性名^=属性值]{}   选择指定属性名中以指定属性值开头的元素
  4. [属性名$=属性值]{}   选择指定属性名以指定属性值结尾的元素
  5. [属性名*=属性值]{}   选择指定属性名中含有指定属性值的元素
<style>
        [title]{color: orchid;}
        [title="abc"]{color: red;}
        [title^="abc"]{font-size: 30px;}
        [title$="abc"]{font-size: 50px;}
        [title*="e"]{color:blue;}
    </style>
</head>
<body>
    <p title="abc">会当凌绝顶</p>
    <p title="abcde">一览众山小</p>
    <p title="helloabc">他日若遂凌云志</p>
    <p>敢笑黄巢不丈夫</p>
    <p>大漠孤烟直</p>
    <p>长河落日圆</p>

3、伪类选择器

伪类,表示不存在的类,特殊的类;伪类一般情况下都会以:开头

  1.   :frist-child  第一个子元素
  2. :last-child   最后一个子元素
  3. nth-child()   选中第n个子元素    n的范围是0到正无穷;2n或者even表示选择偶数位子元素;2n+1或者odd表示选中奇数位子元素

以上的这些伪类都是根据所有的子元素来排序的,所有如果在它们中加多一个元素如span顺序就会不一样了

  1. frist-of-type
  2. last-of-type
  3. nth-of-type

这三个和上面三个作用是一样的,只不过它们是在同类元素中排序的

    4.:not()否定伪类    将符合条件的元素从选择器中去除

    /* ui>li:first-child{color: blue;} */
        /* ui>li:last-child{color:cadetblue;} */
        ui>li:nth-child(even){color: chartreuse;}

        ui>li:nth-of-type(even){color: blue;}

        /* ui>li:first-of-type{font-size: 30px;} */

        ui>li:not(:nth-of-type(3)){font-size: 40px;}
    </style>
</head>
<body>
    <ui>
        <span>我是来测试的</span>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
    </ui>
</body>

4、a元素选择器

a元素的伪类,以a开头

  1. a:link{}  用于表示没有访问过的正常链接
  2. a:visited{} 用于表示访问过的链接
  3. a:hover{} 鼠标移入的链接
  4. a:active{} 鼠标点击的链接

5、伪元素选择器

伪元素,在页面中一些不真实存在的元素(特殊位置),以::开头

  1. ::first-letter 第一个字母
  2. ::frist-line  第一行
  3. ::selection  选中的内容
  4. ::before  元素的开始
  5. ::after   元素的结束

before和after很重要,后期会用到,它们的使用,需要和content配合使用

p.test::first-letter{font-size: 30px;}

        p::first-line{background-color:tomato;}

        p::selection{background-color: dodgerblue;}

        div::before{content:"abc";color: red;}
        div::after{content:'hehe';color: forestgreen;}

 

 

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页