CSS选择器

最新推荐文章于 2024-03-16 20:11:10 发布
最新推荐文章于 2024-03-16 20:11:10 发布
阅读量104 收藏
点赞数
分类专栏： HTML 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simple5960/article/details/108563612
版权
  1. 属性选择器

E[attrbuite]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            border: 1px solid gray;
        }
        /* E[attr] */
        li[id]{
            border: 2px solid red;
        }
        /* E[attr=value] */
        li[class=blue]
        {
            border: 2px solid red;
        }
        /* E[attr*=value]正则表达式匹配，包含有value的E标签 */
        li[class*=red]
        {
            border: 2px solid red;
        }
        /* E[attr^=value]正则表达式匹配，包含有value的E标签并且以value开头的 */
        /* E[attr$=value]正则表达式匹配，包含有value的E标签并且以value结尾的 */
    </style>
</head>
<body>
    <ul>
        <li class="red" id="l"></li>
        <li class="blue" ></li>
        <li class="yellow"></li>
        <li class="green" ></li>
        <li class="darkred" ></li>

    </ul>
</body>
</html>
  1. 兄弟伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* +
        + :获取当前元素相邻的满足条件的元素，此元素后第一个元素
        ~:获取当前元素满足条件的兄弟元素,就是此元素后的所有元素
         */
        li{
            list-style: none;
        }
        .first+li{
            color: hotpink;
        }
        .second~li{
            color: brown;
            font-size: 30pxb;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first">C</li>
        <li class="second">C++</li>
        <li>C#</li>
        <li>JAVA</li>
    </ul>
</body>
</html>
  1. 相对于父元素的解构伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            margin-top: 20px;
            font-size: 15px;
            
        }
        /* E:first-child查找E元素的父级元素中的第一个E元素，不会过滤其他类型的元素*/
        li:first-child{
            color: red;
        }
        /* E:last-child查找E元素的父级元素中的最后一个E元素 */
        li:last-child{
            color:salmon;
        }
        /* E:first-of-type查找E元素的父级元素中的第一个E元素，过滤掉其他类型的元素 */
        li:first-of-type
        {
            color: seagreen;
        }
        /* nth:nth-child()指定索引位置,索引值从1开始 还有nth-of-type()跟上面一样de*/
        li:nth-child(6)
        {
            background: sienna;
        }
        li:nth-child(even)
        {
            background: blue;
        }
        /* 取前5个元素 */
        li:nth-of-type(-n+5)
        {
            background: slateblue;
        }
    </style>
</head>
<body>
    <ul>
        <div></div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
  1. 锚链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2>div{
            width: 200px;
            height: 30px;
            border:1px solid red;
        }
        h2:target
        {
            color: red;
        }
        .left
        {
            float: left;
            position: fixed;
            width: 20%;
            height: 500px;
        }
        .right{
            float: right;
            width: 60%;
        }
    </style>
</head>
<body>
    <div  class="left">
        <a href="#one">one</a>
        <a href="#two">two</a>
        <a href="#three">three</a>

    </div>
    <div class="rihgt">
        <h2 id="one">1
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </h2>
        <h2 id="two">2
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </h2>
        <h2 id="three">3<div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div></h2>
        <h2 id="four">4<div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div></h2>
        <h2 id="five">5<div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div></h2>
        <h2>6</h2>
        <h2>7</h2>
        <h2>8</h2>
        <h2>9</h2>
        <h2>0</h2>
    </div>
</body>
</html>
  1. 伪元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 200px;
        }
        div:nth-of-type(1){
            width: 300px;
            height: 200px;
            background: red;
            float: left;
        } 
        div:nth-of-type(1)::after{
            content: "";

        }
        div:nth-of-type(2)::before{
            display: block;
            /* 必须设置content */
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: -10px;
            background-color: white;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 200px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <!-- before和after默认位行级元素 -->
    <div></div>
    <div></div>
</body>
</html>
Simple_IDE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的三种声明方式和选择器（具体代码实现）
北城落花雨的博客
06-06 6581
一：声明方式 三种声明方式 一：在head标签中使用style标签声明： 作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式 二：在标签上使用style属性进行声明： 作用：此声明会将css样式直接作用于当前标签。 三：3、在head标签中使用link标签引入外部声明好的css文件 作用：此声明相当于调用,解决了不同网页间样式重复使用的问题 一次声...
CSS 选择器
qq_46291038的博客
08-19 512
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
CSS常用五类选择器(1)，web前端开发最新技术
最新发布
m0_57502067的博客
03-16 757
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家。
css选择器
鹏飞的专栏
08-24 1059
css中的选择器   （1）简单选择器（仅描述html的元素）        body {         background-color:red;        }    (2)id选择器(html元素的id属性，唯一)       #myid {          background-color:red;       }    (3)class选择器(html元素的class属性)   
[css选择器] 类选择器
weixin_36210698的博客
03-10 1741
类选择器 原文链接：类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。 提示： 只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做上些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 修改 HTML 代码 在使用类选择器之前，需要修改具体...
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
在JavaScript文件中引入jQuery
simple5960的博客
09-26 5347
var script=document.createElement("script"); script.type="text/javascript"; script.src="../JSlib/jquery-3.4.1.min.js";
GET 和POST传递参数
simple5960的博客
09-26 4285
使用GET方式传递参数 使用POST方式传递参数 提交、重置、普通按钮如何传送参数 单行与多行文本输入框如何传送参数 单选按钮与复选框如何传送参数 隐藏表单字段与图像字段如何传送参数 列表框如何传送参数 使用Javascript防止重复提交表单 使用GET方式传递参数 在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时，浏览器发出的HTTP请求消息的请求方式为GET。 如果网页中的表单元素的method属性被设置为了“GET”，浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET
ToDoList
simple5960的博客
09-17 3339
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../JSlib/jquery-3.4.1.mi
阿里巴巴icon font导入CSS
simple5960的博客
09-26 1287
1.先去icon font官网随便找几个图标添加至购物车 2.点击购物车，添加至项目 3.点击font class 然后生成链接 4.将生成的链接输入浏览器地址栏访问 5.然年后将上面的东西复制到CSS文件中，在其他文件中引入就可以辣 6.使用 ...
HTML5中接口的使用
simple5960的博客
09-13 957
1.全屏接口 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <img
vue中import的ES6语法
simple5960的博客
09-25 932
import Vue from ‘vue’; import App from ‘./App’; import router from ‘./route’; import axios from ‘axios’; import ‘./less/index’; 于是赶快上了阮一峰大牛的《ES6标准入门》这辆车，学习了： 1.项目为什么要模块化？ 2.ES6模块与CommonJS和AMD模块加载的不同。 3.export命令 4.import命令 5.模块的整体加载 get到很多的新姿势，然而并不能解释import
CSS3动画实现无缝滚动
simple5960的博客
09-13 782
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad
JSoup全解析：CSS选择器详解与实战应用
本文档全面介绍了JavaScript库JSoup中的CSS选择器用法，是爬虫开发者不可或缺的参考资料。JSoup利用CSS选择器语法来定位和操作HTML文档中的元素，这对于处理网页抓取、数据提取和网页解析任务至关重要。 **CSS选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值