CSS3属性选择器(CSS3)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3属性选择器</title><style>/* 必须是input 但同时具有value 这个属性 即可选择这个元素  用[]进行包含 *//*  input[value] {color: skyblue;} *//* 只选择type=text 文本框的input 选取出来 *//*    input[type=text] {color: gray;} *//*  选择首先是div 然后是具有class属性 并且属性值 必须是icon开头的这些元素 */div[class^=icon] {color: red;}section[class$=date] {color: blue;}div.icon1 {color: skyblue;/*   类选择器和属性选择器 伪类选择器 权重都是10 */}</style>
</head><body><!--  1.利用属性选择器就可以不用借助类或id选择器 --><!--  <input type="text" value="请输入用户名"><input type="text"> --><!-- 2.属性选择器还可以选择器属性=值的某些元素 --><!--  <input type="text" name="" id=""><input type="password" name="" id=""> --><!--   3.属性选择器可以选择属性值开头的某些元素 --><!--  <div class="ico icon1">小图标1</div>  如果需要对这4个div进行相同的设置，可以使用多类名<div class="ico icon2">小图标2</div><div class="ico icon3">小图标3</div><div class="ico icon4">小图标4</div><div>透明人</div> --><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><div>透明人</div><!-- 4.属性选择器可以选择属性值结尾的某些元素 --><section class="icon1-date">1</section><section class="icon2-date">2</section><section class="icon3-ico">3</section>
</body></html>

CSS3属性选择器(CSS3)相关推荐

css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3属性选择器属性选择器列表: 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
css3属性选择器总结
css3属性选择器总结 (1)E[attr]只使用属性名,但没有确定任何属性值 <p miaov="a1">111111</p> <p miaov=& ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
【前端】【html5/css3】前端学习之路（二）（CSS3新选择器/CSS3盒模型/CSS3过渡效果）
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
【前端开发系列】—— CSS3属性选择器总结
default:比如多选框,页面刷新时,默认选择触发 indeterminate:比如多选框,都没选时的样式 1 <html> 2 <head> 3 <script> ...
css3属性文字换行,CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

CSS3属性选择器(CSS3)

CSS3属性选择器(CSS3)

CSS3属性选择器(CSS3)相关推荐

最新文章

热门文章