文章目录

• css基本的内容
• CSS写法
• CSS选择器的分类(基础常用)
• 通用选择器 (*)
• 标签选择器
• ID选择器
• class选择器/类选择器
• 伪类选择器
• 其他常用选择器

css基本的内容

CSS:层叠样式表(将多个样式按照一定顺序书写最终呈现的效果)
注:如果在HTML页面里面需要写css样式就要去写style标签

CSS写法

1.先写 标签
2.选择指定的标签名作为css的选择器
3.书写 花括号(大括号)
4.书写 属性:属性值
5.当有多个属性时用**;**分号隔开即可

<style>
h1{color: red;text-align: center;font-size: 40px;}
</style>
<h1>噼里啪啦</h1>

CSS选择器的分类(基础常用)

通用选择器 (*)

大家一起用一般修饰整体的文字样式

<style>
*{font-size: 30px;font-family: 楷体;}
</style>
<p>噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*p标签和h1标签里面的文字样式都会变化*/

标签选择器

(使用指定标签的名称):更多使用在去掉默认样式的时候

<style>
p{font-size: 30px;font-family: 楷体;}
</style>
<p>噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

ID选择器

①标签里面写 id='属性值’
②在style样式中,ID找#号 #+属性值
③id只能在标签中使用一次

<style>
#id_p{font-size: 30px;font-family: 楷体;}
</style>
<p id="id_p">噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

class选择器/类选择器

①标签里面写 class='属性值’
②在style样式中,class找.号 .+属性值
③class在标签中可以多次使用

<style>
.p_class{font-size: 30px;font-family: 楷体;}
</style>
<p class="p_class">噼里啪啦</p>
<h1>呼噜哗啦</h1>
/*只有p标签里面的文字样式会变化*/

伪类选择器

CSS伪类是用来添加一些选择器的特殊效果,在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
p:first-letter{color:#0000FF;}/* 选择每一个<p>元素的第一个字母 */
p:first-line{color:#0000FF;}/* 选择每一个<p>元素的第一行 */

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在CSS定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。

其他常用选择器

h1,p{background-color:yellow;}
/*用逗号隔开的选择器 选择所有<p>元素和<h1>元素*/
div p{background-color:yellow;}
/*用空格隔开的选择器 选择<div>元素内的所有<p>元素*/

<style>
a[name^=abc2]{background-color: red;}
/*选择name属性里面以abc2开头的所有元素*/
a[name$=c12]{background-color: red;}
/*选择name属性里面以c12结尾的所有元素*/
a[name*=bc]{background-color: red;}
/*选择name属性里面含子字符串bc的所有元素*/
/*ps:如果选择多个字符时请保持连续性*/
</style>
<a href="链接.html" target="_blank" name="abc12">选择器1</a>
<a href="链接.html" name="abc2">选择器2</a>

<style>
input:focus{background-color: #0000FF;color: white;}
/*选择具有焦点的输入元素*/
p:empty{background-color: #0000FF;}
/*选择每个没有任何子级的p元素（包括文本节点）*/
input:checked{width: 20px;height: 20px;}
/*选择每个选中的输入元素*/
::selection{background-color: red;}
/*匹配元素中被用户选中或处于高亮状态的部分*/
:not(p){background:url(图片路径) no-repeat  ;}
/*选择每个并非p元素的元素*/
</style>
<form action="">
<p><p>
<input type="text" />
<input type="radio" name="" id="" value="" checked="checked"/>男
<input type="radio" name="" id="" value="" />男
</form>

p:nth-child(2){background:#ff0000;}
/*指定每个 p 元素匹配的父元素中第 2 个p元素的背景色*/
/*:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。*/

https://www.runoob.com/cssref/css-selectors.html————CSS选择器（菜鸟教程）