《Web前端开发基础》课件——视频5 属性选择器和伪元素选择器.pptxVIP

CSS基础

--属性选择器与伪元素选择器

01属性选择器伪元素选择器02目录

1属性选择器（1）定义对带有指定属性的HTML元素设置样式（2）语法格式元素[属性]{属性:属性值;属性:属性值;………}

选择器功能描述[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性以及指定属性值的元素。[attribute~=value]用于选取属性值中包含指定值，且该值是完整单词的元素。[attribute|=value]用于选取属性值以指定值开头，且该值是完整单词的元素。该值必须是整个单词，比如lang=en，或者后面跟着连字符，比如lang=en-us[attribute*=value]用于选取属性值中包含指定值的元素。（3）使用方法

!DOCTYPEhtml

html

head

?title属性选择器/title

?style

??/*p[data-description]{?/*满足p元素里面有data-description属性的元素，则第1-3行会显示绿色,第4行无效果*/

??????background-color:#00AA00;

??}*/

??/*p[data-description=first]{?/*满足p元素的data-description等于first的元素，则第1行会显示绿色*/

???background-color:#00AA00;

??}*/

??/*p[data-description~=fir]{?/*满足p元素的data-description包含fir的元素，必须是完整的fir。所以这个样式是没生效的*/

???background-color:#00AA00;

??}*/

??/*p[data-description|=fir]{?/*满足p元素的data-description以fir开头的元素，该值必须是整个fir或者后面跟着连字符-。所以这个样式是没生效的*/

???background-color:#00AA00;

??}*/

??/*p[data-description*=fir]{?/*满足p元素的data-description包含fir的元素，所以第1行是红色*/

???background-color:#FF0000;

??}?*/

??/style

/head

body

?h1如何构建一个网页/h1

?divclass=outer

??divclass=inner

???pdata-description=first1.自从互联网走进千家万户，人们已经离不开它。/p

??/div

??pdata-description=secondparagraph2.构建一个专业的网站需要大量的工作，建议您从简单地工作开始。/p

?/div

?pdata-description=thirdparagraph3.首先需要学习一些关于HTML基本知识。/p

?p4.然后在学习一些关于CSS的知识/p

/body

/html

2伪元素选择器（1）定义用于选择元素的特定部分或生成额外的内容，它们允许开发人员在不修改html结构的情况下，通过css样式来改变元素的外观和行为。（2）语法格式伪元素选择器以双冒号开头，用于区分伪类选择器，语法为::pseudo-element{属性:属性值;属性:属性值;………}

伪元素名功能描述::first-letter向文本的第一个字母添加样式::first-line向文本的第一行添加样式::before在元素之前添加内容::after在元素之后添加内容（3）使用方法

html

head

??title伪元素选择器/title

??styletype=text/css

????p::before{

??????content:小红说：;

????}

????p::after{

??????content:~~~~~;

????}

??/style

/head

body

?p北京欢迎你/p

/body

/html

htmlheadtitle伪元素选择器/titlestyletype=text/cssp::first-letter{color:red;}/style/headbodyh2追溯汉