CSS学习笔记1——CSS选择器

最新推荐文章于 2026-01-04 23:38:14 发布

原创最新推荐文章于 2026-01-04 23:38:14 发布 · 753 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #笔记 #前端 #html

CSS 专栏收录该内容

14 篇文章

订阅专栏

CSS选择器

构成：1. 选择器 2. 声明

选择器 {
		属性： 属性值；
		属性： 属性值;
}

在< head>

< style>

内输入

< /style>

< /head>

选择器

1. 基础选择器

标签选择器（修改全部标签）

用html标签名称作为选择器

标签名 {
		属性： 属性值；
		属性： 属性值;
}

类选择器（差异化选择不同标签）

<head>
    <style>
        .red {            //.后是自己定义的类名
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">文本1</li>
        <li>文本2</li>
    </ul>
</body>

类命名规则

类命名规则：

  头：header 
  内容：content/container
  尾：footer
  导航：nav    
  侧栏：sidebar
  栏目：column
  页面外围控制整体布局宽度：wrapper
  左右中：left right center
  登录条：loginbar
  标志：logo
  广告：banner
  页面主体：main
  热点：hot
  新闻：news
  下载：download
  子导航：subnav
  菜单：menu
  子菜单：submenu
  搜索：search
  友情链接：friendlink
  页脚：footer
  版权：copyright
  滚动：scroll
  内容：content
  标签页：tab
  文章列表：list
  提示信息：msg
  小技巧：tips
  栏目标题：title
  加入：joinus
  指南：guild
  服务：service
  注册：regsiter
  状态：status
  投票：vote
  合作伙伴：partner

设置背景颜色方格

.red {
	width: 100px;         //设置方格
	height: 100px;
    background-color: red;    //设置背景颜色
}

一个标签可以有多个类名（空格分隔）

<div class="red font20">
    内容
</div>

id选择器

#id名 {
	属性1： 属性值1；
	...
}

<div id="id名">
    文本
</div>

结构id调用，只能调用一次

通配符选择器（表示选取页面所有的元素/标签）

* {
	属性1： 属性值1；
	...
}

2.复合选择器

分类

后代选择器
子选择器
并集选择器
伪类选择器

后代选择器( )

可选择父元素里面的子元素

元素1 元素2 { 样式声明 }  
<!-- 元素1 是父级元素  元素2 是元素1的后代元素-->

空格隔开，最终修改的是元素2的样式

子选择器（>）

只能选择某元素最近一级的子元素

元素1>元素2 {样式声明}

大于号隔开，最终修改的是元素2 的样式
元素2 必须是亲儿子

并集选择器（，）

可选择多组标签，同时为他们定义相同的样式

元素1，元素2 {样式声明}

通过逗号连接，修改元素1和元素2
任何形式的选择器都可以是并集选择器的一部分

示例
div,
p,
.pig li {
	...
}

伪类选择器（:）

向某些选择器添加特殊的效果

分为

链接伪类
结构伪类

链接伪类

a:link       //选择所有未被访问的链接
a:visited    //选择所有已被访问的链接
a:hover      //选择鼠标指针位于其上的链接
a:active     //选择活动链接（鼠标按下未弹起的链接）

按照LVHS的顺序声明 :link - :visited- :hover - :active
因为a链接在浏览器中有默认样式，所以需要给链接单独指定样式

a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #369;
	text-decoration: underline;
}

:focus 伪类选择器

用于选取获得焦点（光标）的表单元素

input:focus {
	background-color:yellow;
}

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级的元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择不同状态的链接	跟链接相关	较多	符号是逗号 .nav,header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{} 和 a:hover 实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法