CSS选择器_css 元素下所有的tr-CSDN博客

本文链接：https://blog.csdn.net/jcf52/article/details/124309222

8.1first-letter 常用的给首字母设置特殊样式：

一.ID选择器

一个标签可以设置一个id 属性和id值(类似于每个人的身份证号，具有唯一性)，然后可以通过id选
择器找到对应的标签并为其添加CSS样式.

语法格式：

# i1{
background-color: red;
}

在CSS的命名规范中，名称不能以数字开始，只能以字母、连字符、下划线开始。之后可以是字母、连字符、下划线或数字。

大小写敏感

只能包含[a-zA-Z0-9]、-,，其中不能以、-、0-9开头

二.class 选择器

标签也可以设置class 属性与class属性值，然后可以通过class选择器找到对应的标签并为其添加
CSS样式.
语法格式：

. class值1 class值2 class值3{
 background-color: red;
}

三.元素选择器

根据标签名来找到对应的标签并为其添加CSS样式
语法格式如下：

元素名 {
background-color: red;
}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: red;
            height: 50px;
            width: 50px;

        }
        .c1{
            background-color: yellow;
            height: 60px;
            width: 60px;
        }
        p{
            background-color: #1b6d85;
        }
        /* 在此处添加CSS的内部样式*/
    </style>
</head>
<body>
    <div id="i1">回头科科id</div>
    <div class="c1">回头科科class</div>
    <p>hhhhhhh</p>

</body>
</html>

效果图：

四.通用选择器

使用通配符来广泛的查找标签，并为匹配到的标签添加CSS样式

语法格式：

* {
2background-color: red;
}

五.组合选择器

5.1后代选择器

查找某一个标签内部所有符合条件的标签的选择器，同样也是用来定位到标签并添加CSS样式
语法格式如下：

外层标签(li) 内层标签(a) {
 background-color: red;
 }

5.2儿子选择器

选择所有父级是<div>元素的<p> 元素，添加CSS样式

iv>p {
 color: red;
}

5.3 毗邻选择器

选择所有和当前标签紧挨着的标签，添加CSS样式

标签(div)+紧挨的标签(p){
 color: red;
 }

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table tr{
            background-color: red;
        }
        div>p{
            background-color: orange;
        }
        div+p{
            color: yellow;
        }
    </style>
</head>
<body>
    <table border="2px">
        <caption>数字</caption>
        <tr>
            <th>1</th>
        </tr>
        <tr><td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
    </table>
    <div>
        <p>大家好</p>
    </div>
    <div>我是回头科科</div>
    <p>hello</p>

</body>
</html>

效果图：

5.4弟弟选择器

当前标签后面所有的兄弟标签，添加CSS样式
语法格式：

CSS3---2.兄弟选择器(准确来说叫弟弟选择器,只能向下选) - 编程猎人 (programminghunter.com)

当前标签(#i1)~兄弟标签(p) {
color: red;
}

就是改变兄弟标签的样式

5.5属性选择器

可以根据标带有指定属性或属性值确定标签，并添加CSS样式

标签[属性] {
 color: red;
}
 
标签 [属性=“属性值”]{
color: red;
 }

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div~div{
            color: red;
        }
        p[align="right"]{
            color: orange;
        }
    </style>
</head>
<body>
    <div>回头</div>
    <p>ke</p>
    <div>ke</div>
    <div>ke</div>
    <div>ke</div>
    <p align="right">你好</p>


</body>
</html>

效果图：

六. 分组和嵌套

6.1 分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，通过逗号
（,）来进行分组设置语法格式：

标签1，标签2 {
color: red;
}

6.2 嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签字体设置为红色

.c1 p {
 color: red;
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p{
            color: yellow;
        }
        .c1 p{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是</div>
    <p>keke</p>
    <div class="c1">
        <p>h</p>
    <p>e</p>
    <p>l</p>
    <p>l</p>
    <p>o</p></div>

</body>
</html>

效果：

七.伪类选择器

css中什么是伪类选择器？伪类选择器的简要介绍-css教程-PHP中文网

/* 未访问的链接 */ 
a:link {
color: #FF0000
 }
/* 已访问的链接 */
 a:visited {
 color: #00FF00
 }

 /* 鼠标移动到链接上 */
 a:hover {
 color: #FF00FF
 }

 /* 选定的链接 */
 a:active {
 color: #0000FF
 }

/*input输入框获取焦点时样式*/
input:focus {
outline: none;
 background-color: #eee;}

八.伪元素选择器

8.1first-letter 常用的给首字母设置特殊样式：

p:first-letter {
 font-size: 48px;
color: red;
 }

8.2before

 /*在每个<p>元素之前插入内容*/
p:before {
content:"*";
 color:red;
}

8.3after

/*在每个<p>元素之后插入内容*/
 p:after {
 content:"[?]";
color:blue;
}

before和after多用于清除浮动。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        p:first-letter{
            font-size: 48px;
            color: red;
        }
        div:before{
            content: "*";
            color: yellow;
        }
        h1:after{
            content: "[!]";
            color: #1b6d85;
        }
    </style>
</head>
<body>
<p>回头科科</p>
<div>回头科科</div>
<h1>回头科科</h1>

</body>
</html>

效果图：