本文章仅用于学习,未经同意请勿转载
本文章为0基础自学笔记,文章略显粗略,如有错误,希望大家指正,感谢!
自学来源:
绿叶学习网(CSS入门教程)
菜鸟教程(学习CSS)
B站小甲鱼《零基础入门学习Web开发》(HTML5&CSS3)
CSS是通过选择器来定位要设置样式的HTML元素,通常选择器可分为一下5种。
基本选择器
复合选择器
伪类选择器
伪元素选择器
属性选择器
一、基本选择器
通用选择器: 一般直接用 “*” 表示。
*{
padding:10px; /***内边距为10个像素***/
background-color:#eeeeee;/***背景颜色设置为“#eeeeee”***/
}
但通用选择器太霸道了,整个页面都覆盖了。
元素选择器: 即使用元素名,例:
h2{
text-align:center;
}
类选择器: 通过给某些需要其他布局的元素起新的类名,从而更方便的进行操作。一个元素可以有多个类,以空格分隔词列表。
<head>
<style>
.slogn
{
text-align:center;
}
</style>
</head>
<body>
<p class="slogn">xxxxxxxx</p>
<p>yyyyyyyy</p>
</body>
id选择器: 全局有且只有唯一一个,且不可一个元素有多个id。
<head>
<style>
#p1
{
text-align:center;
}
</style>
</head>
<body>
<p id="p1">xxxxxxxx</p>
<p>yyyyyyyy</p>
</body>
二、复合选择器
交集选择器: 由两个选择器直接构成,其中第一个必定是元素选择器,第二个必须是类选择器或id选择器。
元素选择器.类选择器|元素选择器#id选择器
{
…
}
并集选择器: 又称分组选择器或群组选择器,由两个或两个以上的选择器构成。对参与的选择器都有效,作用是把不同选择器的相同样式抽取出来,进行一次性的定义。
选择器1,选择器2,3选择器
{
…
}
后代选择器: 又称包含选择器,用于包含在指定选择器匹配的元素中的后代元素。这里是指所有后代元素,不仅仅是直接子元素。
选择器1 选择器2 选择器3
{
…
}
子元素选择器: 与后代选择器相类似,但仅直接作用于直接子元素。
选择器1 > 选择器2
{
…
}
相邻元素选择器: 需要选择紧接在某个元素后面的元素或两者具有共同的父元素,即可使用该选择器。
选择器1 + 选择器2
{
…
}
通用兄弟选择器: 相对于相领兄弟选择器,通用兄弟选择器的作用范围更广,匹配的元素在指定的元素之后,但位置不需要紧挨着,只需同一层级。
选择器1 ~ 选择器2
{
…
}
三、伪元素选择器
1、[ ::first-line]: 仅对块级元素第一行内容有效,对于行内元素无效.
(…)::first-line
{
…
}
2、 ::first-letter]: 用于选中文本块中的第一个字符。
(…)::first-letter
{
…
}
3、[ ::before]: 可以产生新的内容到HTML中,将新内容插入到元素的前端,content属性是代表插入的内容。
<head>
<style>
a::before
{
content:"xxx";
}
</style>
</head>
<body>
<a href="https://xxx.com" target="_blank">这是一个网站</a>
</body>
结果:xxx这是一个网站
4、[ ::after]: 可以产生新的内容到HTML中,将新内容插入到元素的后端,用法与【::before】相同,还可以插入图片等。
<head>
<style>
a::after
{
content:url(图片地址);
}
</style>
</head>
<body>
<a href="https://xxx.com" target="_blank">这是一个网站</a>
</body>
结果:这是一个网站【图片】
5、[ ::selection]: 用于匹配用户选中的部分文本
::selection
{
background-color:red;
color:white;
}
结果:用户在网页使用鼠标拖住先要选中的内容,选中的部分将变成红底白色。
四、伪类选择器
4.1动态伪类选择器
能根据条件的改变来匹配元素(除了:focus外,其他基本用于上,由此元素又称锚点元素)
选择器 | 描述 |
---|---|
:link | 链接未被访问 |
:visited | 链接被访问 |
:hover | 鼠标悬停在链接上方 |
:active | 鼠标按下链接,即选定的链接被激活 |
:focus | 当元素获得焦的时候被选中 |
4.2UI伪类选择器
【:enabled】可用
【:disabled】禁用
【:checked】适用于单选框、复选框以及下拉列表的选项
【:required】适用于必选
【:optional】适用于可选
【:default】设置默认样式
【:valid】设置用于“合法”输入的样式
【:invalid】设置用户“非法”输入的样式
【:in-range】设置用户输入“在范围内”的样式
【:out-of-range】设置用户输入“不在范围内”的样式
【:read-only】设置“只读”输入的样式
【:read-write】设置“可读可写”输入的样式
【:indeterminate】用于选择处于不确定状态的用户界面元素
4.3结构伪类选择器
【:root】根元素选择器,设置根元素的样式,影响到整个HTML(极少用到)
【:nth-child】选中第几个子元素(nth-child(n)全选)
【:nth-last-child】选中倒数第几个子元素(nth-last-child(n))
【:nth-of-type】选中第几个类型(nth-of-type(n))
【:nth-last-of-type】选中倒数第几个类型的子元素(nth-last-of-type(n))
【:first-child】用于匹配所有元素中的第一个子元素
【:last-child】用于匹配所有元素中的最后一个子元素
【:only-child】如果该元素是其父元素里唯一的子元素,则选中
【:first-of-type】匹配其父级是特定类型的第一个子元素
【:last-of-type】匹配其父级是特定类型的最后一个子元素
【:only-type】用于匹配父元素下的唯一类型的子元素
【:empty】设置空元素的样式
4.4其它伪类选择器
【:target】用于页面内锚点的样式设置(页面内锚点主要为了实现页面内的跳转),需要id属性进行配合
【:lang】用于匹配设置了:lang全局属性的元素
【:not】否定选择器,可以对任意选择器进行取反操作
CSS引入伪类和伪元素的概念是是为了格式化文档叔以外的信息。
伪类用于当已有元素处于某个状态时,为其添加样式。
伪元素用于创建一些不存在文档树的元素,为其添加样式。
五、属性选择器
可以基于元素的属性进行筛选。
语法 | 描述 |
---|---|
[attr] | 匹配定义了attr属性的元素,不需要考虑属性值 |
[attr=“val”] | 匹配定义了attr属性,且属性值为“val”字符串的元素 |
[attr^=“val”] | 匹配定义了attr属性,且属性值以“val”字符串开头的元素 |
[attr$=“val”] | 匹配定义了attr属性,且属性值以“val”字符串结尾的元素 |
[attr*=“val”] | 匹配定义了attr属性,且属性值包含“val”字符串的元素 |
[attr~=“val”] | 匹配定义了attr属性,且属性值为“val”字符串的元素(如果有多个属性值,只需要其中一个匹配即可) |
[attr|=“val”] | 匹配定义了attr属性,且属性值由连字符进行切割 |