css选择器----属性选择器

最新推荐文章于 2022-08-05 15:38:13 发布
最新推荐文章于 2022-08-05 15:38:13 发布
阅读量335 收藏 1
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45087771/article/details/90580479
版权

3、属性选择器

（1）格式：E[attr] E标签中带有attr属性
例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>

如样式为：.nav a[id] {background: blue; color:yellow;font-weight:bold;}
则：

在这里插入图片描述

如图所示：.nav a[id] 只对a标签中具有id属性的对象使用了新样式
（1）格式：E[attr=“value”] E标签中attr属性的值为value
例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>

如样式为：.nav a[id="first"] {background: blue; color:yellow;font-weight:bold;}
则：

在这里插入图片描述

如图所示：.nav a[id=“first”] 只对a标签中id属性等于first的值使用了新样式
（3）格式：E[attr~=value] E标签中attr属性的值包含value
例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>

如样式为：.nav a[title~="website"]{background:orange;color:green;}
则：

在这里插入图片描述

如图所示：.nav a[title~=“website”] 对a标签中title属性值中包含了website的所有对象使用了新样式
（4）格式：E[attr^=value] E标签中attr属性以value开头的值
  例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>

如样式为：.nav a[title^="http://"]{background:orange;color:green;}
则：

在这里插入图片描述

如图所示：.nav a[title^=“http://”] 对a标签中title属性值以http://开头的对象使用了新样式
（5）格式：E[attr$=value] E标签中attr属性以value结尾的值
 例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>

如样式为： .nav a[title$="site"]{background:black;color:white;}
则：

在这里插入图片描述

如图所示： .nav a[title$=“site”] 对a标签中title属性值以site结尾的对象使用了新样式
（6）格式：E[attr*=value] E标签中attr属性的值包含value （作用相当于：E[attr~=value]）
（7）格式：E[attr|=value] E标签中attr属性的值以value-开头或者仅为value
   例：<body>
<div class="pic_box"> 
	<img src="images/bg1.jpg">
    <div class="nav"> 
        <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first" >1</a> 
        <a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a> 
        <a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a> 
        <a href="#4" class="links item" target="_balnk" lang="zh-tw">4</a> 
        <a href="#5" class="links item" title="zh-cn">5</a> 
        <a href="#6" class="links item" title="website link" lang="zh">6</a> 
        <a href="#7" class="links item" title="open the website" lang="cn">7</a> 
        <a href="#8" class="links item" title="close the website" lang="en-zh">8</a> 
        <a href="#9" class="links item" title="http://www.baidu.com">9</a> 
        <a href="#10" class="links item last" id="last">10</a> 
    </div>
</div>
</body>   

如样式为：.nav a[lang|="zh"]{background:gray;color:yellow;}
则：

在这里插入图片描述

如图所示： .nav a[lang|=“zh”] 对a标签中lang属性值以zh-开头或者仅为zh

的对象使用了新样式

一只小菜鸟的学习笔记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器-xmind
03-10
CSS选择器 xmind - 选择器分类(ID选择器，类选择器，标签选择器，通配选择器，属性选择器，伪类选择器)。 - 选择器关系(分组，后代，子元素，相邻兄弟，后续兄弟)。 - CSS特性(优先级，继承，层叠)。
【html5教学】（一）简介
anananajiushiwo的博客
10-15 415
html的基本介绍
网页改divclass属性和link属性
gulanga5的博客
07-06 976
一.用dom操作实现p标签文字改大小, link标签改href属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom操作</title> <link rel="stylesheet" type="text/css" href="css/none.css" id="link"/> <style type="text/css">
属性选择器
Paranoid_truggle的博客
07-25 80
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 属性选择器--> <style> /*float浮动*/ /*border-radius变圆角*/ /*text-decoration去掉下划线*/ /*font设置字体样式 font 粗体 字体大小/行高 宋体（字体）； */ .demo a
vue学习笔记
weixin_46237429的博客
10-28 320
vue学习笔记1.页面跳转2.字典查询并赋值2.1.在created初始化查询2.2.data里面定义2.3.form表单循环取数据3.带其他信息4.点击事件定义事件事件记得在data里面定义servicePeopleListjs请求5.点击循环赋值6.列表显示7.选择框8.下拉选择框9.日期或者时间的大小比较10.for循环11.for循环删除某个值(索引)12.关于下拉框回显数字 1.页面跳转 1.点击页面 <el-table-column label="服务商名称"
css笔记
XINGXINGR的博客
01-06 163
什么是CSS CSS全称Cascading Style Sheet 层叠级联样式表 Css表现：美化页面 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…. 创建格式： 快速编写CSS 第一种创建格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
3、常用标签和样式
qq_42263859的博客
08-05 816
常用标签和样式
CSS选择器-.pdf
02-28
此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...
postcss-prefix-selector:使用选择器为所有CSS规则添加前缀
05-12
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
CSS3的first-child选择器实战攻略
09-24
主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下
Class-links:这是一个基本的网页，我用它来保存我的在线课程链接
07-23
班级链接 这是一个基本的网页，我用它来保存我的在线课程链接。
第九课 css选择器-011
08-03
1.在属性后面使用 2.作为 style 属性写在行内的样式 3.id 选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.标签本身自带样式或者继承样
（html+css）一个完整的网页主页布局：logo+导航+banner+新闻列表...
热门推荐
qq_33569780的博客
05-19 4万+
作者是一只在web前端上探索进步的小白白..... （本篇代码中的banner图我还没学习完，所以暂时放的不规范哈，正式的话应该放在banner_con这个盒子里面的，我随后会回来补充正确放置的方法的！） ps:差点因为不会用编辑器而写不了博客QAQ........太蠢了 index.html(主页-结构) <!DOCTYPE html> <!-- 声明文档类型--> <html lang="en"> <!-- 确定语言形态 --> <head&
css选择器
colline的博客
08-23 132
ID选择器：ID是唯一的，在一个页面中一个只能出现一次，同时第一个不能写数字 标识符：# class选择器：class选择器可以复用，可以添加多个class样式 标签选择器： 使用场景：去掉某些默认样式时候 群组选择器：通过逗号，给多个不同的选择器添加统一css样式 如：div ，#text ，.title 交集选择器：选中同时满足ele1和ele2的元素 ele1ele2 两个选择器之间没有任何符号，如（ul.txt1） 层次选择器： 后代 M N{ } （全部子代都可继承） 父子 M>N .
css3 基本语法
m0_61073617的博客
12-14 2479
使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。 CSS全称层叠样式表，又称风格样式表 CSS规则由两部分组成：选择器和声明 HTML引入CSS样式的方法有三种： 行内样式 注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。 <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14
CSS高级选择器
liubin5620的博客
03-15 168
1、层次选择器 1.1后代选择器 1.2 子选择器 1.3 相邻兄弟选择器 1.4 通用兄弟选择器 2、结构伪类选择器 ul li :first-child{} ul li :last-child{} p:nth-child(n){} p:nth-of-type(n){} 3、属性选择器 a[id]:存在属性id的a标签 ...
CSS-选择器
weixin_46100406的博客
02-27 155
1.简单的选择器 1.1. ID选择器 #happy { color:red; } 1.2. 类(class)选择器 .btn { color:red; } 1.3. 元素选择器(又称类型选择器) div { color:red; } 1.4. 全局（通配符）选择器 * { color:red; } 2.复杂的选择器 2.1.子选择器（#nav>p,...
CSS3 选择器——属性选择器
weixin_30887919的博客
11-01 656
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3...
DOM解析的例子：
Java教程
03-27 437
下面代码使用DOM解析XML文件 package com.app; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.do
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值