CSS属性选择器详解

最新推荐文章于 2024-10-11 16:46:33 发布
最新推荐文章于 2024-10-11 16:46:33 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： CSS 系列笔记+源码展示 文章标签： css 前端 网页 属性选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47556601/article/details/122735187
版权

大家好，给大家分享一下CSS的属性选择器

写十个标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="demo">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
    


</body>
</html>

看结果：

在这里插入图片描述

加属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com"class="item first" id="first">1</a>
    <a href=""class="links item active" target="_blank"title="test">2</a>
    <a href="images/java关键字.png"class="links item ">3</a>
    <a href="images/java关键字.png">4</a>
    <a href="images/java关键字.png">5</a>
    <a href="images/java关键字.png">6</a>
    <a href="images/java关键字.png">7</a>
    <a href="images/java关键字.png">8</a>
    <a href="images/java关键字.png">9</a>
    <a href="images/java关键字.png">10</a>


</body>
</html>

在这里插入图片描述
1 里面写了个到百度的超链接：

在这里插入图片描述

写css代码：
（属性选择器）

<style>
        .demo a{
            float:left ;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: green;
            text-align: center;
            color: aqua;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    </style>

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
         /*调节属性参数*/
            float:left ;   /*浮动：想做*/
            display: block; /*变成方块元素*/
            height: 50px; /*高度调节*/
            width: 50px;     /*调节宽度*/
            border-radius: 10px;    /*圆角边框*/
            background: green;    /*背景颜色*/
            text-align: center;     /*文字居中对齐*/
            color: aqua;      /*文字颜色*/
            text-decoration: none; /*去掉下划线*/
            margin-right: 5px;   /*元素向右进行偏移*/
            font: bold 20px/50px Arial; /*字体大小和行高*/
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com"class="item first" id="first">1</a>
    <a href=""class="links item active" target="_blank"title="test">2</a>
    <a href="images/java关键字.png"class="links item ">3</a>
    <a href="images/java关键字.png">4</a>
    <a href="images/java关键字.png">5</a>
    <a href="images/java关键字.png">6</a>
    <a href="images/java关键字.png">7</a>
    <a href="images/java关键字.png">8</a>
    <a href="images/java关键字.png">9</a>
    <a href="images/java关键字.png">10</a>


</body>
</html>

结果：

在这里插入图片描述

a[id]{
            background: yellow;
            /*存在id属性的元素   a[][]    */

在这里插入图片描述

下一个：

  a[id=first]{
        background: brown;

        /* id=first的元素设定   */
        }

显示效果：

在这里插入图片描述

 a[href^=http]{
           
            background: burlywood;
             /*    选中herf中以http开头的元素*/
        }

显示效果：

在这里插入图片描述

 a[href$=png]{
            background: deeppink;
        }

效果

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float:left ;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: green;
            text-align: center;
            color: aqua;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        /*    属性名：属性名=属性值（正则）*/
        /*    = 绝对等于*/
        /*    *=包含这个字符*/
         /* ^=以这个开头   */
        /* $= 以这个结尾   */
        /*存在id属性的元素   a[][]    */

        /*}*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*    !*存在id属性的元素   a[][]    *!*/

        /*}*/
        /*a[id=first]{*/
        /*background: brown;*/

        /*!* id=first的元素设定   *!*/
        /*}*/


        }
        a[href$=png]{
            background: deeppink;
        }
        /*    选中herf中以http开头的元素*/
       /*a[class="links item first"]{*/
       /*    background: red;*/
       /*}*/

        /*a[href^=http]{*/
        /*    background: burlywood;*/
        /*!*    选中herf中以http开头的元素*!*/
        /*}*/

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com"class=" links item first" id="first">1</a>
    <a href=""class="links item active" target="_blank"title="test">2</a>
    <a href="images/java关键字.png"class="links item ">3</a>
    <a href="images/java关键字.png">4</a>
    <a href="images/java关键字.png">5</a>
    <a href="images/java关键字.png">6</a>
    <a href="images/java关键字.png">7</a>
    <a href="images/java关键字.png">8</a>
    <a href="images/java关键字.png">9</a>
    <a href="images/java关键字.png">10</a>


</body>
</html>

属性选择器是很常用的（标签定位某一个属性）

选择器是前端当中很重要的部分

好了，有关css属性选择器就到这里了，谢谢大家

思诚代码块
关注
专栏目录
CSS 中的 属性选择器
CyberPlayer的博客
02-23 1988
css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式 CSS [attribute] 选择器 [attribute] 选择器用于选取带有指定属性的元素。 下例选择所有带有 target 属性的 <a> 元素； a[target] { background-color: yellow; } CSS [attribute="value"] 选择器 [attribute="value"] 选择器用于选取带有指定属性和值的元素。 下例选取所有带有 targe
CSS基础笔记五。属性选择器（属性里面选择元素的值，有开头，结尾，包含，和固定值等选择）
qq_55006020的博客
06-28 2521
1，基础选择器（全局*， 元素， id#， 类.， 合并，）2，关系选择器（后代空格，子代大于，相邻兄弟加号，通用兄弟波浪号）3，伪类选择器（鼠标的四种状态爱恨类别（link，visted，hover，active），列表的多种选择（first-child，last-child，nth-child（n/odd/even）），容器内为空（empty）/唯一（only-child）/除了某个（not（元素）），元素为焦点的时候（focus），多选和复选增强（checked））
CSS教程--属性选择器
weixin_30512785的博客
10-09 98
CSS 2 引入了属性选择器。 属性选择器可以根据元素的属性及属性值来选择元素。 简单属性选择 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。 例子 1 如果您希望把包含标题（title）的所有元素变为红色，可以写作： *[title] {color:red;} 亲自试一试 例子 2 与上面类似，可以只对有 href 属性的锚（a 元素）应...
12.2 CSS属性选择器
Python老吕的博客
09-05 1894
属性选择器是 CSS 中非常有用的工具，它提供了一种灵活的方式来选择和样式化具有特定属性或属性值的元素。通过合理使用属性选择器，可以创建更加动态和适应性强的网页设计。属性选择器的应用场景非常广泛，它们可以用于各种情况，从简单的样式应用到复杂的布局和交互设计。属性选择器的类型提供了多种方式来根据元素的属性和属性值进行选择，这使得 CSS 能够更加精细地控制页面的样式。通过考虑这些注意事项，你可以更有效地使用属性选择器，创建出既美观又高效的网页设计，同时确保代码的长期可维护性和广泛的浏览器兼容性。
CSS 属性选择器详解
06-01 136
 CSS 2 引入了属性选择器。 属性选择器可以根据元素的属性及属性值来选择元素。 简单属性选择 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。 例子 1 如果您希望把包含标题（title）的所有元素变为红色，可以写作： *[title] {color:red;} 亲自试一试 例子 2 与上面类似，可以只对有 href 属性的锚（a 元素）应
CSS中的属性选择器
weixin_48637535的博客
08-09 3101
CSS3中共有7种属性选择器，具体说明如下： 1.E[attr]：只使用了属性名，并没有确定任何属性值。 2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。 3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。 4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。 5.E[attr$="value"]：指定了
CSS属性选择器详解.pdf
02-28
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性...
详解CSS3中属性选择器新增加的特性
09-24
这些选择器可以根据实际需要灵活运用，大大增强了CSS选择元素的能力。开发者可以根据需求编写更简洁、更有针对性的CSS规则，对HTML文档中的元素进行精确的样式设置。另外，这些属性选择器对于现代Web设计中的一些...
十种CSS选择器详解介绍
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
css复杂选择器及css字体样式、颜色属性详解
12-28
之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种 1.父子（派生）选择器 <em>234 <em>123 此时要使234有颜色，需要用到父子选择器，虽说用之前的标签选择器可以让它有...
css属性选择器
qq_39111074的博客
08-24 344
以前都是通过设置class或者id属性来进行标签选择，class属性有时需要设置复合名称，css属性可以使用属性选择器，更简单的进行标签选择 css属性选择器使用方法 1.标签名[属性名]- - -标签名相同，要选择的标签有某个属性，但是其他标签没有 2.标签名[属性名=属性值]- - - 标签名相同，都具有某个属性，但是属性值不同 3.标签名[属性名^=×××]- - -标签名相同，都具有某个属性，选择属性值以×××开头的 4.标签名[属性名$=×××]- - -标签名相同，都具有某个属性，选择属性值以×
【CSS】属性选择器
热门推荐
luckyboy!的博客
08-20 1万+
属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的五种用法。
CSS属性选择器
最新发布
zn1231的博客
10-11 929
属性选择器用于根据元素的属性或者属性值来选择元素。下面介绍五种常用的属性选择器。
CSS 属性选择器
歪脖先生的博客
01-11 1679
属性选择器 在HTML中，可以通过元素各种各样的属性，来给元素增加很多附加信息。如通过 width 属性，可以指定元素的宽度；通过 id 属性，可以区分不同的元素，并通过Javascript来控制这些元素的内容和状态。 以往的CSS中，大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此，对于一个大型网站，CSS代码比较庞大，若要修改某个样式，就成为非常头疼的
3.4 CSS属性选择器
Python老吕的博客
09-04 1056
通过这些组合技巧，开发者可以根据元素的属性和属性值来精确地定位和样式化元素，从而实现更复杂和灵活的页面设计。通过合理使用属性选择器，开发者可以根据元素的属性和属性值来精确地定位和样式化元素，从而实现更复杂和灵活的页面设计。通过合理使用属性选择器，开发者可以根据元素的属性和属性值来精确地定位和样式化元素，从而实现更复杂和灵活的页面设计。属性选择器是CSS中一种强大的工具，它允许开发者根据元素的属性和属性值来选择元素。属性选择器是CSS中一种强大的选择器，它允许开发者根据元素的属性和属性值来选择元素。
css 属性选择器详解和示例
05-13
CSS属性选择器是一种用于选择具有特定属性值的元素的CSS选择器。以下是一些常见的属性选择器及其示例： 1. [attribute]: 选择具有指定属性名的元素 例如，选择所有具有“data-”属性的元素： ``` [data] { /* CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

思诚代码块

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

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

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

打赏作者

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

抵扣说明：

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

余额充值