css_属性选择器（根据属性名或属性值设定指定样式）

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>p[title]{color:red;}</style>
</head>
<body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p>求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body>
</html>

2.[属性名=属性值] 选择含有指定属性和属性值的元素

<!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>p[title=hello]{color:red;}</style>
</head>
<body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body>
</html>

3.[属性名^=属性值] 选择属性以指定值开头的元素

<!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>p[title^=hello]{color:red;}</style>
</head>
<body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body>
</html>

4.[属性名$=属性值] 选择属性值以指定值结尾的元素

<!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>p[title $= hello]{color:red;}</style>
</head>
<body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hihello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body>
</html>

5.[属性名*=属性值] 选择属性值中含有某元素的元素

<!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>p[title *= hello]{color:red;}</style>
</head>
<body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hihello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body>
</html>

css_属性选择器（根据属性名或属性值设定指定样式）相关推荐

css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
css-选择器-进阶-属性选择器-组选择器-nth选择器
考点属性选择器,选取具有name属性的元素 [name] 选取具有某个属性的元素: [属性名] 属性选择器,选取属性target值为_blank的元素 [target=_blank] [属性名=属性 ...
HTML5属性选择器以什么开头,CSS3 选择器属性选择器介绍
属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上 ...
图解css3：核心技术与案例实战. 2.11　属性选择器
2.11 属性选择器在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同DIV元素进行区分.CSS2中引入了一些属性选择器,这些选择器可基于元素的属性来匹配元素 ...
CSS基础选择器（标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器）
CSS基础选择器选择器种类标识优缺点标签(元素) div 快速为某一类标签统一样式,但不能设计差异化样式类 .one-letter 为元素对象定义单独或者相同的样式 ID #app 同一个页 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...

css_属性选择器（根据属性名或属性值设定指定样式）

css_属性选择器（根据属性名或属性值设定指定样式）相关推荐

最新文章

热门文章