css3笔记总结——选择器

最新推荐文章于 2024-01-29 16:43:03 发布

笨啊ni

最新推荐文章于 2024-01-29 16:43:03 发布

阅读量175

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/csdn_zy_com/article/details/117470293

版权

本文对css3的一些知识点做了一些简单的概括和总结，欢迎大家一起学习共同进步，如有不足欢迎指正。
选择器是css3中一个重要的内容，大型网站中如果单一的使用元素的class属性书写样式有两个缺点：一：class属性本省没有语义，纯粹用来服务css样式，属于多余属性；二：使用class属性，并没有把样式与元素绑定起来，针对同一个class属性，文本框、下拉框、甚至按钮也可以使用，这样是非常混乱的，修改样式也不方便。所以，在css3中，提倡使用选择器来将样式与元素直接绑定起来。

属性选择器（att代表属性，val代表属性值）

[att=val]

//例将id为“section1”的div元素的背景色设定为黄色
[id=section]{
	background-color:yellow;
}

[att=val]*
此选择器的含义：选中用att表示的属性值中包含val指定的字符
例：[id*=section1]，则页面中id为"section1"、“sdsection1”、“section1_1"的元素都被选中。
[att^=val]
此选择器的含义：选中用att表示的属性值中以val指定的字符开头的元素
例：[id*=section]，则页面中id为"section1”、“sectionwe1”、"section1_1"的元素都被选中。
[att$=val]

此选择器的含义：选中用att表示的属性值中以val指定的字符结尾的元素
例：[id$=1]，则页面中id为"section1"、“sdsection1”、"section1_1"的元素都被选中。

结构性伪类选择器

1.伪类选择器
a:link——未被访问时的状态
a:visited——已访问时的状态
a:hover——当鼠标悬停在a标签上时的状态
a:active——当标签长按时的状态

2.伪元素选择器
1.first-line：用于向某个元素中的第一行文字使用样式
2.first-letter：用于向某个元素中的文字的首字母或第一个字使用样式
3.before：用于在某元素之前插入一些内容

li:before{content:"第一列"}

4.after:用于在某元素之后插入内容（用法同上）

选择器root、not、empty和target
1、root选择器将样式绑定在根元素中。
2、not:对某个结构元素使用样式，但想排除某个子结构元素
3.empty：指定元素中内容为空白时的样式
4.target：对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
选择器first-child、last-child、nth-child和nth-last-child
first-child选择第一个子元素、last-child选中最后一个子元素
nth-child;对父元素中某个指定序号的子元素来指定样式
nth-last-child：表示倒数第几个子元素
循环使用样式
仍然可以采用nth-child选择器，把参数n改成可循环的an+b的形式。
a:表示每次循环共包括几种样式
b:表示指定的样式在循环中所处位置

li:nth-child(2n+1){color:red;}
li:nth-child(2n+2){color:pink;}

伪类选择器E:hover、E:active、E:focus
E:hover用来指定当鼠标指针移动到元素上时元素所使用的样式
E:active用来指定元素被激活时使用的样式
E:focus用来指定元素获得光标焦点时使用的样式
伪类选择器E:enabled、E:disabled
E:enabled用来指定当元素处于可用状态时的样式
E:disabled用来指定当元素处于不可用状态时的样式
伪类选择器E:checked、E:default、E:indeterminate、E:selection
E:checked用来指定当表单中的radio单选框或checkbox复选框处于选取状态的样式
E:default用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式
E:indeterminate用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如何用户选取了其中任何一个单选框，则该样式被取消指定
E:selection用来指定当元素处于选中状态时的样式
伪类选择器E:invalid、E:valid
E:invalid用来指定当元素内容不能通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式
E:valid用来指定当元素内容通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式

使用选择器在页面中插入内容

使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。

<style type="text/css">
//在元素前面插入内容
h2:before{
	content:'content';
}
//指定个别元素不插入
h2>.sample:before{
	content:none;
}
</style>
<body>
<h2>1</h2>
<h2 class="sample">2</h2>
<h2>3</h2>
</body>

使用content属性来插入项目编号

在content属性中使用counter属性值来针对多个项目最加连续编号，使用方法如下

<元素>{
	content:counter(计数器名);
}
//计数器可以任意命名，另外，还需要在元素的样式中追加对元素的counter-increment的指定，为了使用连续编号，需要将counter-increment属性值设定为选择器的计算器名 
<元素>{
	counter-increment:before或after中指定的计数器名;
}

指定编号的种类

content：counter（计数器名，编号种类）;
//可以使用list-style-type的属性值来指定编号种类
upper-alpha//大写字母
upper-roman//大写罗马字母

编号嵌套

<style>
    h1::before{
        content: counter(mycounter)'.';
    }
    h1{
        counter-increment: mycounter;
        //如果要将第二个大标题里的中标题重新开始编号的话，需要在大标题中使用counter-reset属性将中编号进行重置。
        counter-reset: subcounter;
    }
    h2::before{
        content:counter(mycounter)'-'counter(subcounter)'.';
    }
    h2{
        counter-increment: subcounter;
        counter-reset: subsubcounter;
        margin-left: 40px;
    }
    h3::before{
        content:counter(mycounter)'-'counter(subcounter)'-'counter(subsubcounte)'.';
    }
    h3{
        counter-increment: subsubcounter;
        margin-left: 80px;
    }
</style>
<body>
    <h1>大标题</h1>
    <h2>中标题</h2>
    <h3>小标题</h3>
    <h3>小标题</h3>
</body>

效果如图：
在这里插入图片描述

笨啊ni

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3笔记总结——选择器

本文对css3的一些知识点做了一些简单的概括和总结，欢迎大家一起学习共同进步，如有不足欢迎指正。选择器是css3中一个重要的内容，大型网站中如果单一的使用元素的class属性书写样式有两个缺点：一：class属性本省没有语义，纯粹用来服务css样式，属于多余属性；二：使用class属性，并没有把样式与元素绑定起来，针对同一个class属性，文本框、下拉框、甚至按钮也可以使用，这样是非常混乱的，修改样式也不方便。所以，在css3中，提倡使用选择器来将样式与元素直接绑定起来。属性选择器（att代表属性，va
复制链接

扫一扫