CSS选择器

已于 2022-07-17 17:18:26 修改
阅读量445 收藏 1
点赞数
分类专栏： 前端 文章标签： css 前端
于 2022-07-17 17:17:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53329472/article/details/125831106
版权

目录

1. 基础选择器

1.1 标签选择器

 1.2 类选择器

 1.3 id选择器

1.4 通配符选择器

 2. 复合选择器

2.1 后代选择器

 2.2 子选择器

 2.3 并集选择器

 2.4 伪类选择器

2.4.1 链接伪类选择器 

2.4.2 focus伪类选择器

CSS是层叠样式表，是一种标记语言

主要构成：选择器及一条或多条声明 

h1{属性:值}

选择器是选取需设置样式的元素的模式，分为基础选择器和复合选择器两大类

1. 基础选择器

是由单个选择器组成

1.1 标签选择器

可以把某一类标签全部选择出来

    标签{

        属性:值;

        属性:值;

    }

 例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>标签选择器1</p>
    <p>标签选择器2</p>
    <span>标签选择器3</span>
</body>
</html>
标签选择器效果展示

 1.2 类选择器

差异化选择不同的标签，单独选一个或某几个标签

html中以class属性表示，类选择器以"."显示

口诀：样式点定义，结构类调用

（再此说一下，想从基础学前端的可以去小破站找黑马程序员pink老师的课，讲的很好，对0基础的很友好，不是托，我是在学校学的前端，但大学嘛，主要看自己自主学习，在学校学的不深，所以有的不会的都是在他那学的，他讲课很有趣，口诀也是他给的，所以想学基础的可以去尝试一下）

多类名：class="名1 名2"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器-类选择器</title>
    <style>
       .green {
        color: green;
       }
    </style>
</head>
<body>
    <ul>
        <li>标签选择器</li>
        <li class="green">类选择器</li>
    </ul>
    <div >id选择器</div>
    <div class="green">都是基础选择器</div>
</body>
</html>

 1.3 id选择器

id属性只能在每个HTML文档中出现一次，通常和javascript合用

HTML中以id属性表示，id选择器以"#"定义

口诀：样式#定义，结构id调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器-id选择器</title>
    <style>
       #red {
        color: red;
       }
    </style>
</head>
<body>
    <div id="red">基础选择器-id选择器</div>
</body>
</html>

id选择器和类选择器最大的不同在于使用次数

1.4 通配符选择器

选取页面中的所有元素

使用*定义，通配符选择器不需要调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器-通配符选择器</title>
    <style>
       * {
        color: red;
       }
    </style>
</head>
<body>
    <div>基础选择器</div>
    <span>通配符选择器</span>
    <ol>
        <li>所有元素都会改变</li>
        <li>在特殊情况中使用</li>
    </ol>
</body>
</html>
通配符选择器

 2. 复合选择器

由多个基础选择器通过不同方式组合而成

2.1 后代选择器

可选择父元素里面的子元素

当标签发生嵌套时，内层标签就成为外层标签的后代

外层标签写前，内层标签写后。

    元素1 元素2 {

        样式声明

    }

元素2是元素1的后代就可

最终选择的是元素2（元素2改变）

 例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器-后代选择器</title>
    <style>
        ul li {
            color: red;
        }
        ul li a {
            color: green;
        }
        ol li {
            color:pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">悯农</a>
        </li>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>
            <a href="#">JavaScript</a>
        </li>
    </ol>
</body>
</html>
后代选择器效果展示

 2.2 子选择器

只能选择作为某元素的最近一级的子元素（相当于亲儿子）

元素1>元素2 {

    样式声明

}

元素2必须是亲儿子

最终选择的是元素2（元素2改变）

 例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器-子选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">CSS</a>
        <P><a href="#">HTML</a></P>
    </div>
</body>
</html>

 2.3 并集选择器

可选择多组标签，同时为他们定义相同的样式，通常用于集体声明

元素1,元素2 {

    样式声明

}

元素1，元素2改变

任何形式的选择器都可以作为并集选择器的一部分

例如： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器-并集选择器</title>
    <style>
        span,
        div,
        p,
        ol li {
            color: blue;
        }
    </style>
</head>
<body>
    <span>复合选择器</span>
    <div>后代选择器</div>
    <p>子选择器</p>
    <ol>
        <li>并集选择器</li>
    </ol>
</body>
</html>

并集选择器效果展示

 2.4 伪类选择器

向某些选择器添加特殊的效果

伪类选择器最大的特点是用":"表示

2.4.1 链接伪类选择器 

链接伪类选择器
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下未弹起）

为了确保生效，按LVHA顺序声明

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器-伪类选择器</title>
    <style>
        a {
            color: green;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">链接伪类选择器</a>
</body>
</html>

链接伪类选择器效果展示

2.4.2 focus伪类选择器

用于选取获得焦点（光标）的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器-focus选择器</title>
    <style>
        input:focus {
            background-color: rgb(170, 234, 170);
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>
focus伪类选择器

天天见error
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery怎么在点击li标签之后添加一个在class，点击下一个li时删除上一个class？
lowers_sunshine的博客
08-08 3632
div class="client"> span class="client_title">选择您的游戏客户端span> ul class="client_type"> li class="ioswx">苹果微信li> li class="androidwx">安卓微信li> li class="iosqq">苹果QQli>
Vue实现对点击的列表＜li＞添加class样例
L00918的博客
05-27 840
实现思路： 设置一个变量 active，然后写成:class="{active:index === active}"，然后click的时候，传入index,把active变量的值赋值为index；这样this.active=index,index==‘index’ 返回true，所以class样例生效 <ul> <li v-for="(item,index) in params" @click="meClick(index)" :class="{active:inde
jquery怎么在点击li标签之后添加一个在class，点击下一个li时删除上一个class？...
weixin_33978016的博客
11-18 371
思路：点击当前li元素后是用removeClass()删除所有兄弟元素（使用siblings()获取）的class样式，然后使用addClass()为当前li添加class。 具体演示如下： 1、HTML结构：设计三个li元素 &lt;ul id="test"&gt; &lt;li&gt;Glen&lt;/li&gt; &lt;li&gt;Tane&lt;/li&gt; ...
Vue-点击 li 动态添加class --＞[练]
Messchao的博客
07-20 440
初级vue知识练习,重点class与style
python:基础知识
火焰
11-06 7957
以 javascript/c/java/c# 对比了解python基础知识
获取 ＜li＞ 标签的所有 class
zhaoyangjian724的专栏
11-30 3676
# !/usr/bin/env python # -*- coding: utf-8 -*- from lxml import etree # 获取文件元素 htmlEmt = etree.parse('test03.html') # 获取所有的 &lt;li&gt; 标签 result = htmlEmt.xpath('//li/@class') print result print typ...
css li
m0_58826255的博客
06-08 409
css可以使用margin简写属性设置li标签的外边距来使li间距增大，margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。 li标签默认间距如下： 第一个li 第二个li 第三个li
常用的div ul li css样式 详细的UL-LI样式三种形式
热门推荐
10-27 1万+
常用的div ul li css样式 详细的UL-LI样式三种形式   BODY { FONT-SIZE: 12px;FONT-FAMILY: "宋体", arial } .menu { CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px } .menu LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDIN
li标签 常用的CSS设置
weixin_48596030的博客
02-16 1762
关于li标签
css 简单知识
qq_43635902的博客
02-11 270
CSS样式表 一、概述 1、CSS是什么 ？ 层叠样式表，定制html元素的显示样式，美化页面，对于前端页面的搭建十分重要 2、为什么要使用CSS （1）CSS 指层叠样式表 (Cascading Style Sheets) （2）样式定义如何显示 HTML 元素 （3）样式通常存储在样式表中 （4）把样式添加到 HTML 中，是为了解决内容与表现分离的问题 111 （5）外部样式表可以极大提高工作效率 （6）外部样式表通常存储在 CSS 文件中 （7）多个样式定义可层叠为一个 HTML 标签原本被设计为
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
CSS 选择器支持列表
09-25
evotech网站整理的CSS选择器支持列表.
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
不能不知道的CSS选择器技巧
09-24
不能不知道的CSS选择器技巧，CSS选择器使用技巧，你应该知道特分享给大家，感兴趣的小伙伴们可以参考一下
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
css 选择器 介绍
09-27
每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
驯服CSS选择器
09-25
CSS 文件的大小和所引起的 HTTP 的请求数.
JSoup CSS选择器用法大全
08-15
备查，搞爬虫开发者必备
使用css选择器爬虫
最新发布
04-09
使用CSS选择器进行爬虫是一种常见的网页数据提取方法，它可以通过指定CSS选择器来定位和提取网页中的元素。以下是使用CSS选择器进行爬虫的基本步骤： 1. 导入相关库：首先需要导入相关的库，如requests和BeautifulSoup。 2. 发送请求：使用requests库发送HTTP请求，获取目标网页的HTML内容。 3. 解析HTML：使用BeautifulSoup库解析HTML内容，将其转换为BeautifulSoup对象。 4. 使用CSS选择器定位元素：通过调用BeautifulSoup对象的select()方法，传入CSS选择器作为参数，可以定位到目标元素。 5. 提取数据：根据需求，使用BeautifulSoup对象提供的方法或属性，提取所需的数据。 6. 处理数据：对提取到的数据进行处理，如清洗、整理或存储等操作。 7. 循环爬取：如果需要爬取多个页面，可以使用循环结构，不断发送请求和解析HTML，提取数据。 8. 异常处理：在爬取过程中，可能会遇到各种异常情况，如网络连接错误、页面不存在等，需要进行适当的异常处理。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天天见error

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值