css复杂选择器和内容生成

最新推荐文章于 2022-05-29 19:54:08 发布

余生再见

最新推荐文章于 2022-05-29 19:54:08 发布

阅读量136

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/hewindows/article/details/103092428

版权

web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、复杂选择器
1、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面
语法：
选择器1+选择器2
ex:
1、div+p{}
2、#content+.important{}
2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配附带 attr 属性的元素
ex:
1、[id]
匹配页面所有附带 id 属性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素
ex:
1、p[id]
3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素
ex:
div[id][class]
4、elem[attr=value]
value:值
作用：匹配页面上附带attr属性同时值为 value 的elem 元素
ex:
input[type=text] : 获取页面所有文本框
5、elem[class~=value]
作用：匹配附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值。
6、elem[attr^=value]
^= : 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、elem[attr$=value]
$= : 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、elem[attr*=value]
*= : 包含 value 字符即可
3、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
2、语法
:target
2、元素状态伪类
1、作用
元素状态：启用，禁用，被选中(checked)
2、语法
:enabled , 匹配每个已启用元素(表单控件)
:disabled , 匹配每个已禁用元素(表单控件)
:checked , 匹配每个被选中元素(radio,checkbox)
3、结构伪类(重点)
1、:first-child
匹配属于其父元素中的首个子元素
2、:last-child
匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配属于其父元素中的第n个子元素
4、:empty
匹配没有子元素(包含文本)的每个元素

5、:only-child
匹配属于其父元素中的唯一子元素

<div>
					<p>Hello World</p>
				</div>

4、否定伪类
1、语法
:not(选择器)
作用：将满足选择器的元素从指定范围中排除出去
4、伪元素选择器
1、作用
伪类：匹配元素的
伪元素：匹配元素中的内容
2、语法
1、:first-letter 或 ::first-letter
匹配指定元素的首字符
2、:first-line 或 ::first-line
匹配指定元素的首行
3、::selection
匹配被用户选取的部分
3、: 和 ::的区别
CSS3之前，所有的伪元素选择器，全部都是使用 :，ex :first-line,:first-letter

CSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line

为了能够实现浏览器的兼容性，比较推荐使用 :的写法
实例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        .box{
            width: 500px;
            height: 600px;
            font-size: 20px;
            background: cyan ;
        }
        .child-box1+.child-box2{
            font-size: 40px;
            color: red;
            text-align: center ;
        }
        #child-box3+p{
            font-size: 60px;
            color: brown;
            text-align: right ;
        }
    </style>
</head>
<body>
    <div class="box" >
        床前明月光
        <div class="child-box1">
            疑是地上霜
        </div>
        <div class="child-box2">
            举头望明月
        </div>
        <div id="child-box3">
            低头思故乡
        </div>
        <p>静夜思</p>
    </div>
</body>
</html>

2、内容生成
1、什么是内容生成
通过 css 向现有的元素内容区域中增加一部分内容
2、伪元素选择器
1、:before 或 ::before
匹配到某元素的内容区域之前

(内容区域之前)Hello World

2、:after 或 ::after
匹配到某元素的内容区域之后

Hello World(内容区域之后)

3、属性
属性:content
取值：
1、字符串 : 纯文本
2、url : 图像
3、计数器
4、计数器
1、作用
生成一段有序的数字，并且插入到元素中
2、三步走
1、声明(复位)计数器
1、属性
counter-reset
取值：
1、默认值为 0
2、可以取值为正数或负数
counter-reset:计数器名称值;
一次性声明多个计数器:
counter-reset:名1 值1 名2 值2;
2、什么地方声明计数器???
不能放在使用的元素中声明
2、设置计数器的增量
1、属性
counter-increment
作用：设置某个选择器出现的计数器的增量，默认值为1

counter-increment:名称增量值;
2、什么地方声明计数器增量???
哪个元素使用，就在哪个元素中设置增量
3、使用计数器
1、函数
counter(计数器名称)

配合着 :before 或 :after 一起使用

	div:before{
						content:counter(name);
					}

余生再见

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css复杂选择器和内容生成

1、复杂选择器1、兄弟选择器1、作用通过元素的平级关系来匹配其他元素只能向后不能向前2、分类1、相邻兄弟选择器匹配指定元素的相邻兄弟相邻：紧紧挨在指定元素的后面语法：选择器1+选择器2ex:1、div+p{}2、#content+.important{}2、通用兄弟选择器通用：某元素后面所有的兄弟元素语法：选择器1~选择器22、属性选择器1、作用允许使用元素...
复制链接

扫一扫

专栏目录