0
点赞
收藏
分享

微信扫一扫

基础选择器(重点)

想溜了的蜗牛 2022-03-24 阅读 84

目录

一、基础选择器

1、 标签选择器(元素选择器)

2、 id选择器

3、 类选择器

4 、多类名选择器

id选择器和类选择器区别

5、 通配符选择器

6 、伪类选择器

(1) 链接伪类选择器

(2) 结构(位置)伪类选择器(CSS3)

(3)目标伪类选择器


一、基础选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。

1、 标签选择器(元素选择器)

h1 {
    color: red;
}
​
p {
    color: green;
}

2、 id选择器

<div class="lin">林黛玉</div>  <!-- 使用类选择器 -->
<div id="xue">薛宝钗</div>     <!-- 使用id选择器 -->
<style>
    .lin {          /*类选择器, 在元素中使用class属性*/
        color: blue;
    }
    #xue {          /*id选择器, 在元素中使用id属性*/
        color: red;
    }
</style>

 

3、 类选择器

<div class="demo">这是一个div</div>
.demo {
    color: red;
}

小技巧:

4 、多类名选择器

我们可以给标签指定多个类名,从而达到更多的选择目的。

<!--在class属性中使用多个类名,表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div> 
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>
<style>
    .font20 {
        font-size: 20px;
    }
    .font14 {
        font-size: 14px;
    }
    .red {
        color: red;
    }
    .fontWeight {
        font-weight: bold;
    }
</style>

 

  • id选择器和类选择器区别

W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

类选择器(class)好比人的名字,可以重复使用,如:李伟、张伟

id选择器(id)好比人的身份证号,是唯一的,不允许重复,只能使用一次。

id一个标签只能有一个id值,一个标签可以拥有多个class值

id不能使用其他已经使用过的id值,class可以。

5、 通配符选择器

* {
    margin: 0;  /*定义外边距*/
    padding: 0; /*定义内边距*/
}

注意:权重很低       通配选择器较少使用。

6 、伪类选择器

分为三类:链接伪类选择器、结构(位置)伪类选择器(CSS3)、目标伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。

伪类选择器使用“:”冒号来表示,比如 :link{}

(1) 链接伪类选择器 (l o v e h a t e)

注意:

<style>
    a:link {        /*未访问的链接*/
        color: grey;
    }
    a:visited {     /*已访问的链接 表示已经点击过一次的状态*/
        color: orange;
    }
    a:hover {       /*鼠标移动到链接上*/
        color: red;
    }
    a:active {      /*选定的链接  鼠标点击不松开的状态*/
        color: blue;
    }
</style>

实际工作中,链接伪类选择器使用简写即可。

a {     /*a是标签选择器,所有的链接*/
    font-weight: 700;
    font-size: 16px;
    color: grey;
}
a:hover {   /*:hover 是链接伪类选择器 鼠标移动到链接上*/
    color: red;     /*鼠标经过时,文本由原来的灰色变为红色*/
}

小米:#ff6700

京东:#f10215

支付宝:#00bbee

微信:#348903

(2) 结构(位置)伪类选择器(CSS3新增的选择器)

  • :first-child 获取第一个子元素

    在 HTML 中,文本本身是 HTML 元素的父节点,HEAD 和 BODY 是 HTML 元素的子节点。

  • :last-child 获取最后一个子元素。注意:IE8不支持X:last-child。

  • :nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字(n从1开始)、关键字even偶数odd奇数)或公式<2n-1>(n从0开始,当表达式的值小于等于0时,将不选择任何子元素)。

  • :nth-last-child(n) 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始获取。可以使用数字(n从1开始)、关键字(even偶数、odd奇数)或公式(n从0开始)。

  • :first-of-type 选择特定元素的第一个子元素

  • :last-of-type 选择特定元素的最后一个子元素

  • :nth-of-type(n) 只计算父元素中指定的某种类型的子元素

  • :nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素,从这个元素的最后一个元素开始获取

    /* 选择父元素中的第一个p子元素 */
     p:first-of-type {
         background-color: red;
    }
    ​
    /* 选择父元素中的最后一个p子元素 */
    p:last-of-type {
        background-color: blue;
    }
    ​
    /* 选择父元素中的第二个span子元素 */
    span:nth-of-type(2) {
        color: yellowgreen;
        font-weight: bold;
    } 
    ​
    /* 选择父元素中倒数第二个span子元素 */
    span:nth-last-of-type(2) {
        color: cornflowerblue;
        font-weight: bold;
    }
    ​
    /* 选择父元素中为2的倍数的span子元素 */
    span:nth-of-type(2n) {
        font-weight: bold;
        color: brown;
    }
    ​
    /* 选择父元素中倒数 2的倍数的span子元素 */
    span:nth-last-of-type(2n) {
        font-weight: bold;
        color: brown;
    }
    ​
    <span>body下面的第一个span子元素</span>
        <p>body下面的第一个p子元素</p>
        <p>body下面的第二个p子元素</p>
        <div>
            <span>div中的第一个span子元素</span>
            <span>div中的第二个span子元素</span>
            <p>div下面的第一个p子元素</p>
        </div>
  • :only-child 匹配没有任何兄弟元素的元素

<style>
    :only-child { /* 匹配所有没有任何兄弟的元素 */
        color: indigo;
    }
    .div1:only-child { /* 匹配没有任何兄弟的元素 且这个元素的class值有div1 */
        color: hotpink;
    }
</style>
​
<body>
    <div></div>
    <div>
        <div class="div1">div下面唯一的没有任何兄弟元素的div子元素</div>
    </div>
    <p></p>
    <p></p>
    <p>1</p>
    <span>没有兄弟span元素</span>
</body>
  • :only-of-type 匹配所有元素 这个元素没有其他相同类型的兄弟元素

<style> 
    :only-of-type { /* 匹配所有元素 */
        font-size: 30px;
    } 
    /* 匹配所有元素,且p元素没有任何一个同类型的兄弟元素 p元素有p标签兄弟元素,匹配不成功 */
    p:only-of-type {
        font-size: 30px;
    }
    
    /* 匹配span元素,且span元素没有任何一个同类型的兄弟元素 匹配成功 */
    span:only-of-type {
        font-size: 30px;
    }
    
    /* 匹配li元素,且span元素没有任何一个同类型的兄弟元素 匹配成功 */
    li:only-of-type {
        font-size: 28px;
    }
</style>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <span>body下没有兄弟的span元素</span>
    <li>body下没有兄弟的li元素</li>
</body>
  • :empty 选择的元素里面没有任何的内容或子节点

:empty { /* 匹配所有没有内容和子节点的元素  */
    width: 100px;
    height: 50px;
    background-color: red;
}
​
p:empty { /* 匹配所有没有内容和子节点的元素 且这个元素为p元素 */
    width: 100px;
    height: 50px;
    background-color: red;
}
<body>
    <div></div>
    <p></p>
    <p></p>
    <p>1</p>
</body>
  • :root 匹配文档的根节点 html

    :root { /*匹配文档的根元素*/
        background-color: #dde6ef;
    }

(3)目标伪类选择器

 

举报

相关推荐

CSS —— 基础选择器

CSS基础选择器

0 条评论