CSS中的选择器

最新推荐文章于 2024-03-09 13:40:17 发布

不另外加糖

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量179

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/weixin_49343253/article/details/118297466

版权

HTML&CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、基础选择器

1.1 标签选择器

针对一类标签

结构：
   标签名{css属性名:属性值;}

例子：

<style type="text/css">
    p{
        font-size:14px;
    }
</style>

<body>
    <p>css</p>
</body>

1.2 类选择器

针对你想要的所有标签，类名前加点

结构：
  .类名{css属性名:属性值;}

例子：

<style type="text/css">
    .oneclass{
        width:800px;
    }
</style>

<body>
    <h2 class="oneclass">你好</h2>
</body>

同一个标签可以使用多个类选择器，中间用逗号隔开，但是不能写成多个class属性

<h3 class="classone  classtwo">我是一个h3啊</h3>

<h3 class="classone" class = "classtwo">我是一个h3啊</h3>    //错误

1.3 id选择器

只选择你想要的某一个元素，因为Id名是独一无二的，用#来定义

结构：
   #id名{css属性名:属性值;}

例子：

<head>
<title>Document</title>

<style type="text/css">
    #mytitle{
        border:3px dashed green;
    }
</style>

</head>

注意：定义id名有规范：

1、只能包含数字、字母和下划线

2、只能以字母开头

3、严格区分大小写，如aaa和AAA就不是一个id名称

1.4 通配符选择器

用*来定义，会选择所有的标签，不经常用，会增加客户端的负担

最常用的就是设置整个页面的边距

<style type="text/css">
*/*定义通用选择器*，希望所有标签的上边距和左边距都为0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>

二、高级选择器

2.1 后代选择器（空格隔开）

会把符合条件的后代一起选择出来，注意是后代，包括儿子和孙子

选择器1 选择器2{css属性名:属性值;}        //两个选择器之间用空格隔开

例子：

  <style type="text/css">
      .div1 p{
          color:red;
      }
  </style>

2.2 子代选择器（>)

会把符合条件的子代选择出来，注意是子代，就是最近的一层嵌套关系，再往下不算

结构：
  选择器1>选择器2{css属性名:属性值;}

例子：

div#container > ul {
border: 1px solid black;
}

2.3 交集选择器（紧挨）

选中同时满足多个选择器的标签

结构：
  选择器1选择器2{css属性名：属性值;}    //两个选择器紧挨，没有空格

2.4 并集选择器( , )

同时选择多组标签，用逗号隔开

结构：
  选择器1,选择器2{css属性名：属性值;}    //两个选择器用逗号隔开

2.5 兄弟选择器(+,~)

1、相邻兄弟选择器

选中同一个父容器中选择器1标签后紧挨的第一个符合条件的兄弟标签，若没有符合条件的，匹配失败

结构：
  选择器1+选择器2{css属性名：属性值;}    //+连接

2、~选择器

选中同一父容器下所有满足条件的兄弟标签

结构：
  选择器1~选择器2{css属性名：属性值;}    //~连接

2.7 伪类选择器

伪类选择器的状态主要有：

1、link：a标签点击之前

2、visited：a标签点击之后

3、hover：鼠标经过

4、focus：鼠标点击聚焦时

5、active：鼠标点击没有放开时，长按

伪类选择器状态都是在前面加冒号定义

例子：

<head>
<style type="text/css">
  /* 伪类选择器：动态伪类*/
    input:focus/*让input文本框获取焦点时：边框：#FF6F3D这种橙色；文字：绿色；背景色：#6a6a6a这种灰色*/{
        border:3px solid #FF6F3D;
        color:white;
        background-color:#6a6a6a;
    }
    label:hover/*鼠标放在label标签上时显示蓝色*/{
        color:blue; 
    }
    label:active/*点击label标签鼠标没有松开时显示红色*/{
        color:red; 
    }
  </style>
</head>
<body>
<input type="text" name=""><br><br>
<label>css大神</label>
</body>

小问题：

a:link{ }和a{ }有什么区别呢？他们都表示没有点击的链接

添加伪类的选择器针对所有具有href属性的a标签，不包括锚点

没有伪类的选择器针对所有a标签，包括锚点

新知识点：什么是锚点？

锚点就是定位器，对于一些比较大型的项目，设置锚点可以让我们点击锚点，跳转到相应的位置。哇哦，好方便！怎么设置锚点呢？有两种方法

1、通过a标签自身的href属性，将href属性值赋值为要定位到的标签id值

<a href="a">链接文本</a> <br />

<div id='a'>跳转到我这</a>

2、通过a标签的name属性设置锚点的名称

<a href='' name='a'></a><span>我是锚点</span>

<a href='#a'>点我跳转到锚点</a>

三、结构伪类选择器

E:first-child{ }           //选择第一个E元素

E:last-child{ }            //选择最后一个E元素
  
E:nth-child(n){ }          //选择第n个E元素

E:nth-last-child(n){ }     //选择倒数第n个E元素

小括号里还可以放公式，进行一些选择
-n+5  选择前5个
5+n   从第5个开始往后选

小栗子：

<style>
    ul li:first-child a{        //选择ul里第一个li里的a
        color:red
    }
</style>

<style>
    ul li a:first-child{        //选择ul里的li里面的第一个a
        color:red
    }
</style>

注意nth-of-type(n)和nth-child(n)之间的区别

li: nth-of-type(n) 是把所有的li编号，选择第n个

li: nth-child(n) 是把所有的子元素标号，选择第n个且恰好是li标签的，不然设置无效

不另外加糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的选择器

目录一、基础选择器1.1 标签选择器1.2 类选择器1.3 id选择器1.4 通配符选择器二、高级选择器2.1 后代选择器（空格隔开）2.2 子代选择器2.3 交集选择器（紧挨）2.4 并集选择器2.5 伪类选择器三、结构伪类选择器一、基础选择器1.1 标签选择器针对一类标签结构：标签名{css属性名:属性值;}例子：<style type="text/css"> p{ font..
复制链接

扫一扫

专栏目录