P14-前端基础-CSS属性选择器

1.属性选择器案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"> <title>属性选择器</title><style>/* [属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素*//* [属性名] 选择含有指定属性的元素 */p[title] {color: red;}/* [属性名=属性值] 选择含有指定属性和属性值的元素 */p[title=abc] {color: green;}/* [属性名^=属性值] 选择属性值以指定值开头的元素  */p[title ^=abc] {color: yellow;}/* [属性名$=属性值] 选择属性值以指定值结尾的元素 */p[title $=abc] {color: tomato;}/* [属性名*=属性值] 选择属性值中含有某值的元素的元素 */p[title *=abc] {color: blue;}</style></head><body><p title="abc">少小离家老大回</p><p title="abcdef">乡音无改鬓毛衰</p><p title="helloabc">儿童相见不相识</p><p>笑问客从何处来</p><p>秋水共长天一色</p><p>落霞与孤鹜齐飞</p></body>
</html>

P14-前端基础-CSS属性选择器相关推荐

前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. ...
11. 前端基础--CSS盒子定位
文章目录前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
教你玩转CSS 属性选择器
目录具有特定属性的HTML元素样式属性选择器属性和值选择器属性和值的选择器 - 多值表单样式 CSS 属性选择器具有特定属性的HTML元素样式具有特定属性的HTML元素样式不仅仅是cl ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
php 分析css,全面分析css属性选择器
1.[class~="flower"]:选中有flower的class class="flower ss" class="ss flower" ...
css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css属性选择器包括[]是否有某属性,=属性是否等于,~=属性包含,^=属性值以指定字符串开头,$=属性值以指定字符串结尾,*=属性 ...
前端使用CSS属性，使Div上下左右移动指定像素
前言前端使用CSS属性,使Div上下左右移动指定像素前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求上面是美工出的图大概就是2个横着排列的div和分页器居中对齐 ...

P14-前端基础-CSS属性选择器

P14-前端基础-CSS属性选择器

1.属性选择器案例

P14-前端基础-CSS属性选择器相关推荐

最新文章

热门文章