CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)

你猜阅读：230 2022-06-06 14:12:37 评论：0

1. 基础选择器

1.1 标签选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
    <style> 
 
        p { 
            font-family: 宋体, sans-serif, Arial, "Times New Roman", 微软雅黑, "Microsoft YaHei UI", serif; 
        } 
 
    </style> 
</head> 
<body> 
 
<p>段落一</p> 
<p>段落二</p> 
<div>盒子一</div> 
 
</body> 
</html>

font-family可以选择多个, 如果前面的没有, 则会选择后面的字体

显示效果如下：
标签选择器

1.2 class类选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
    <style> 
 
        .box-size { 
            width: 100px; 
            height: 100px; 
        } 
 
        .red { 
            background-color: red; 
        } 
 
        .blue { 
            background-color: blue; 
        } 
 
    </style> 
</head> 
<body> 
 
<div class="box-size red">盒子一</div> 
<div class="box-size blue">盒二</div> 
<div class="box-size red">盒子三</div> 
 
</body> 
</html>

显示效果如下：
类选择器

1.3 id选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
    <style> 
 
        #font-set { 
            color: yellow; 
            font-size: 50px; 
        } 
         
    </style> 
</head> 
<body> 
 
<p id="font-set">段落一</p> 
<p id="font-set">段落二</p> 
 
</body> 
</html>

通常说id只能被调用一次, 这是因为javascript的dom编程是使用getElementById来获取这个id的, 如果有多个, 就获取不到, 所以需要保证html的标签只调用id一次, 但是css中可以调用多次, 为了统一, 还是保证html的标签只调用id一次

显示效果如下：
id选择器

1.4 通配符选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
    <style> 
 
        * { 
            font-size: 50px; 
        } 
 
    </style> 
</head> 
<body> 
 
<p>段落一</p> 
<div>盒子一</div> 
 
</body> 
</html>

显示效果如下：
通配符选择器

2. 复合选择器

2.1 后代选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        ul a { 
            color: red; 
        } 
 
    </style> 
</head> 
<body> 
 
<ul> 
    <li><a href="#">链接一</a></li> 
</ul> 
 
</body> 
</html>

格式为：元素1 元素2 {}，元素2只要是元素1的后代就可以

显示效果如下：
后代选择器

2.2 子元素选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        li>a { 
            color: red; 
        } 
 
    </style> 
</head> 
<body> 
 
<ul> 
    <li><a href="#">链接一</a></li> 
</ul> 
 
</body> 
</html>

格式为：元素1>元素2 {}，元素2只能元素1的儿子

显示效果如下：
子元素选择器

2.3 并集选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        div,p { 
            color:red; 
        } 
 
    </style> 
</head> 
<body> 
 
<div>盒子一</div> 
 
<p>段落一</p> 
 
</body> 
</html>

同时给多个选择器设置样式

显示效果如下：
并集选择器

2.4 链接伪类选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        a:link { 
            color:blue; 
            text-decoration: none; 
        } 
 
        a:visited { 
            color:gray; 
        } 
 
        a:hover { 
            color:black; 
        } 
 
        a:active { 
            color:yellow; 
        } 
 
    </style> 
</head> 
<body> 
 
<a href="http://www.baidu.com">百度</a> <br /> 
<a href="#">未知的链接</a> 
 
</body> 
</html>

a:link表示所有未选择的链接
a:visited表示访问过的链接
a:hover表示鼠标移动到的链接
a:active表示鼠标左键选中但未松开时的链接
遵循LVHA的顺序

显示效果如下：
链接伪类选择器

2.5 focus伪类选择器

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
    <meta charset="UTF-8"> 
    <title>test title</title> 
 
    <style> 
 
        input:focus { 
            background: red; 
        } 
 
    </style> 
</head> 
<body> 
 
<input type="text" /> <br /> 
<input type="text" /> 
 
</body> 
</html>

一般用于input这种输入型的表单元素

当鼠标移到第一个输入框，点击左键，此时光标选中第一个输入框，显示效果如下：
focus伪类选择器

标签:CSS

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。