CSS伪元素选择器和属性选择器
伪元素
能使用伪元素来选择元素中的一些特殊位置
一、给段落定义样式
- :first-letter 首字母(只能用于块元素)
- :first-line 第一行
1、为p元素中的第一个字符设置颜色为黄色,字体为30px
p:first-letter{color:yellow;font-size:30px;}
<p>这是一个段落</p>
2、为p中的第一行设置背景颜色为绿色(多写点)
p:first-line{background-color:green;}
二、元素前后部分
- :before 表示元素最前面的部分(紧随着开始标签的后面)
- :after 表示元素最后面的部分(紧挨着结束标签的前面)
一般before和after都要结合content这个样式一起使用,通过content向before或after的位置添加一些内容。
所添加的内容因为是通过css添加的所以无法选中这部分内容。
1、在p元素后面添加文字内容
p:after{content:"会出现在元素的最后面";color:blue;}
2、在p元素前面添加文字(使用伪类元素插入的内容“会出现在元素的最前面”这部分内容不可选中)
p:before{content:"会出现元素的最前面";color:orange;}
属性选择器
按属性选择元素,可以对具有给定属性或属性值的元素进行格式化,按属性选择要设置的 元素
语法结构:
No1、首先是选择器(要考察其属性的元素的选择器)
No2、接着输入属性的名称(元素要考察的属性的名称)
方括号[ ],包围目标属性和目标值。
No3、选择相应的属性选择器,属性选择器有:
- [属性名] 匹配具体的属性,不问具体属性值是什么
- [属性名="value"] 属性值符合条件的元素将被选中
- [属性名~="value"] 属性值包含这里的value的元素将被选中(属性值还可以包含其他内容,不同的属性值之间空隔分开)必须匹配完整的单词,而不是单词的一部分。
- [属性名|="value"] (前面是管道符号|,不是1或字母L),表示属性值等于这里的value或是以value-开头的元素将会被选中。不用输入连字符
- [属性名^="value"] 表示属性值以这里的value开头(作为完整的单词,或单词的一部分)的元素将被选中
- [属性名$="value"] 表示属性值这里以value结尾(作为完整的单词,或单词的一部分)的元素将被选中
- [属性名*="value"] 表示属性值至少包含这里的value一次的元素将被选中,value不必是属性值中的完整单词
实例:
1.选择所有具有class属性的段落p,设置其前景色为红色
p[class]{color:red}
<p class="b1">第一个段落</p>
<p class="b2">第二个段落</p>
<p>第三个段落</p>
2.选择任何lang属性值等于en(必须完全匹配)的p元素,设置前景色为红色
p[lang="en"] {color:red}
<p lang="en">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
3、~=可以测试单词的部分匹配,即匹配以空格相邻的多个单词中的一个(完整单词)。选择class属性中属性值中有boxone的article元素,并设置其背景颜色为黄色。
article[class~="boxone"] {background-color:yellow}
<article class="boxone content">article</article>
<article class="boxoone">center</article>
(1) *=选择器可以匹配部分字符串(不需要完整的单词)
article[class*="box"] {background-color:yellow} √
(2) 当写成如下形式的时候,这个选择器将无法匹配,因为box不是空格分隔的单词列表中某个完整的单词。
article[class~="box"] {background-color:yellow} ×
4、|=选择任何带有lang属性且属性值是以es开头的h2,设置前景颜色为蓝色。
h2[lang|="es"] {color:blue}
<h2 lang="es">第一个二级标题</h2>
<h2 lang="zh">第二个二级标题</h2>
5、可以通过联合使用多种选择器,选择既有href属性,又有任意属性值包含单词box的class属性的a元素,设置背景颜色为橙色。
a[href][class~="box"] {background-color:orange}
<a href="http://www.baidu.com">百度</a>
<a href="#" class="box link">未链接</a>
<a href="http://www.baidu.com" id="box">其他进入方式</a>
6、*=选择器选择所有既有href属性,又有任意属性包含are(作为完整单词或单词的一部分,如hare、dare。无论are出现在属性值的什么位置)的title属性的a元素。
a[href][title*="are"] {font-size:30px}
<a href="#" title="百度are">百度</a>
<a href="#" title="sinlangsre">新浪</a>
<a href="#" title="wangyi">网易</a>
7、^=选择器匹配任何href属性以http://开头(作为完整的单词,或单词的一部分)的a元素。
a[href^="http://"] {background-color:red}
<a href="http://www.baidu.com">百度</a>
<a href="#">新浪</a>
8、匹配任何src属性完全等于logo.png的img元素。
img[src="wj1.png"] {border:1px solid green}
<img src="wj.png">
9、选择器的精确度比前一个低,匹配任何src属性值以。png结尾的img元素。
img[src$=".png"] {border:1px solid green}
<img src="wj.png">
<img src="1.jpg">
CSS伪元素选择器和属性选择器的更多相关文章
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- 学习CSS之如何改变CSS伪元素的样式
一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...
- js分析 汽_车_之_家 js生成css伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- css中的7中属性选择器
在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3. ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- 使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
随机推荐
- html script生成二维码
<div class="code" align="center"> <p >手机端扫描以下二维码直接观看(支持安卓Android/苹果i ...
- setTimeout(function(){}, 0);
for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 0); console.log(i); } 结果 ...
- CSS3—— 多列 用户界面 图片 按钮
多列 将文本内容设计成像报纸一样的多列布局 多列创建 间隙 列边框 边框颜色+宽度 指定列的宽度 指定元素跨越多少列 用户界面 由用户调整元素大小[谷歌浏览器等] 以确切的方式定义适应某个区域的具体内 ...
- HTML5——新表单元素 表单属性 语义元素
表单元素 新的表单元素 datalist——输入域选项列表 keygen——提供一种验证用户的可靠方法 output——不同类型的输出,比如计算或脚本输出 表单属性 <form> / &l ...
- python字符串的学习计划
python字符串有14小节内容, 计划7天学完吧(不知道能完成不) 今天依然是在禅道上写用例的一天 禅道上的用例,编写的时候比较方便 修改维护的时候,有点小麻烦(没有在Excel表中容易修改) D5 ...
- LeetCode.872-叶子值相等的树(Leaf-Similar Trees)
这是悦乐书的第334次更新,第358篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第204题(顺位题号是872).考虑二叉树的所有叶子,从左到右的顺序,这些叶子的值形成叶 ...
- SIRIM上海,http://www.sirim-global.com
SIRIM上海 http://www.sirim-global.com
- Linux 系统安装 python
Centos 7 Centos 7 安装 python3 (不要卸载python2 因为yum 要用) https://phoenixnap.com/kb/how-to-install-python- ...
- python 封装dlib模型进行人脸识别系统的登录认证
1.直接上干货 #!/usr/bin/python # -*- coding: utf-8 -*- import time import dlib import numpy as np class f ...
- mangde 的服务启动
启动命令如下