CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布
原创 最新推荐文章于 2024-10-22 09:22:43 发布 · 148 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文深入探讨了CSS中的属性选择器、兄弟伪类、相对于父元素的解构伪类、锚链接伪类及伪元素的应用技巧。通过具体实例，讲解了如何使用这些选择器精确地定位和样式化网页元素。
  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>
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
css选择器
鹏飞的专栏
08-24 1155
css中的选择器   （1）简单选择器（仅描述html的元素）        body {         background-color:red;        }    (2)id选择器(html元素的id属性，唯一)       #myid {          background-color:red;       }    (3)class选择器(html元素的class属性)   
CSS常用五类选择器(1)，web前端开发最新技术
m0_57502067的博客
03-16 815
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家。
CSS的三种声明方式和选择器（具体代码实现）
北城落花雨的博客
06-06 6778
一：声明方式 三种声明方式 一：在head标签中使用style标签声明： 作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式 二：在标签上使用style属性进行声明： 作用：此声明会将css样式直接作用于当前标签。 三：3、在head标签中使用link标签引入外部声明好的css文件 作用：此声明相当于调用,解决了不同网页间样式重复使用的问题 一次声...
[css选择器] 类选择器
weixin_36210698的博客
03-10 1984
类选择器 原文链接：类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 类选择器允许以一种独立于文档元素的方式来指定样式。 该选择器可以单独使用，也可以与其他元素结合使用。 提示： 只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做上些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 修改 HTML 代码 在使用类选择器之前，需要修改具体...
css选择器总结
最新发布
qq_73986726的博客
10-22 1660
1.css选择器 1.1css基础选择器 标签选择器 类选择器 id选择器 配符选择器 1.2css复合选择器 后代选择器 子选择器 并集选择器 交集选择器 后续兄弟选择器 紧邻兄弟选择器 伪类选择器 :focus伪类选择器 :enabled伪类 :not()伪类 1.3css选择器总结 2.css3新增选择器 2.1属性选择器 2.2结构伪类选择器 2.3伪元素选择器css选择器分为基础选择器和复合选择器。标签选择器，类选择器，id选择器，通配符选择器。 缺点：不能设计差异化样式，只能选择全部的当前标签。
CSS 选择器
langmanboy的博客
04-08 2151
CSS 选择器 1. 什么是 CSS 选择器？ CSS 选择器用于查找（或选取）要设置样式的 HTML 元素 CSS 选择器可以分为五大类： 简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素） 选择器 {属性: 属性值;} 2. 简单选择器 元素选择器 类选择器 id 选择器 * 通用选择器（通配符） 交集与并集选择器 2-1 元素
css 选择器
qq_42638586的博客
04-10 1861
css选择器
CSS选择器-.pdf
02-28
此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
在JavaScript文件中引入jQuery
simple5960的博客
09-26 5436
var script=document.createElement("script"); script.type="text/javascript"; script.src="../JSlib/jquery-3.4.1.min.js";
GET 和POST传递参数
simple5960的博客
09-26 4572
使用GET方式传递参数 使用POST方式传递参数 提交、重置、普通按钮如何传送参数 单行与多行文本输入框如何传送参数 单选按钮与复选框如何传送参数 隐藏表单字段与图像字段如何传送参数 列表框如何传送参数 使用Javascript防止重复提交表单 使用GET方式传递参数 在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时，浏览器发出的HTTP请求消息的请求方式为GET。 如果网页中的表单元素的method属性被设置为了“GET”，浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET
ToDoList
simple5960的博客
09-17 3413
<!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 1463
1.先去icon font官网随便找几个图标添加至购物车 2.点击购物车，添加至项目 3.点击font class 然后生成链接 4.将生成的链接输入浏览器地址栏访问 5.然年后将上面的东西复制到CSS文件中，在其他文件中引入就可以辣 6.使用 ...
HTML5中接口的使用
simple5960的博客
09-13 1060
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
掌握CSS选择器的在线学习游戏分享
### 知识点：CSS选择器学习 CSS (Cascading Style Sheets) 是一种样式表语言，用于描述 HTML 或 XML 文档的呈现格式。通过 CSS，我们可以为网页添加样式，控制布局，以及对元素进行定位。选择器是 CSS 的核心概念之...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值