html+css选择器

最新推荐文章于 2024-08-05 02:50:34 发布

paul0926

最新推荐文章于 2024-08-05 02:50:34 发布

阅读量477

点赞数

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/paul0926/article/details/90053518

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html+css选择器

1、标签选择器

直接设定所有的标签，比如可以是p、h1、d1、strong、span等HTML标签，在CSS中直接展现。
以span标签做例子，这是css内嵌式写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        span{
            font-size: 60px;
            color: blueviolet;
            font-family: 宋体;
        }
    </style>
</head>
<body>
<span>这是展示css样式</span><br>
<span>第二行样式</span>
</body>
</html>

2、类选择器（使用最多）

css里面用”.“开头的表示类选择器，如有如下的css代码

.text_field {
    width: 278px;
    height: 28px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0;
}

html页面要写定类，使用’class=“类名”'调用，这里注意class=“”可以引入多个类名，用空格隔开

<input type="text" id="username" class="text_field" placeholder="请输入昵称"/>

注意：类选择器和ID选择器比较类似，都是通过HTML元素添加属性而生效的，可应用在内的任何元素上，不过和ID选择器不同的是，类选择器是可以重复的。例如可以像下面的代码这样设定：

<div class="error">用户名不存在！</div>
<p class="error">邮箱格式不正确！</p>

也可以针对不同类型的元素对同一个名称的类选择器设定不同的样式规则，即使是相同名称的类选择器，也可以有不同的表现。例如，对于上面的HTML代码，可以修改CSS规则如下：

div.error{
color:red;
font-size:14px;
}

p.error{
color:green;
font-size:14px;
}

3、id选择器

通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复，例如，

,后来使用的时候就用#login_frame，这里的”#login_frame“就是ID选择器，在CSS中以”#“开头。
css相关代码：

        #image_logo {
    margin-top: 18px;
}

html相关代码：

<p id="image_logo"><img src="qq.png" width="288" height="88"></p>

4、后代或层级选择器

选定一个父级下的子元素，比如html内容为：

<ul>
    <li><a>这是数据1</a1></li>
    <li>这是数据2</li>
    <li>这是数据3</li>
    <li>这是数据4</li>
    
</ul>

如果要只选中ul里面的li标签，那就不能使用类选择器,通过层级关系选择用空格层层进入：

ul li{
	font-size:30px;
}
ul li a{
	color:pink;
}

5、并集或者组选择器

用逗号分开，意思是设定div，span，p三个标签的属性：

div,span,p{
            color: pink;
        }

6、指定标签选择器

指定标签选择器就是标签.类名,比如ul.father
下面是一个指定标签选择器和后代选择器多层调用例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul.father li.son{
            color: pink;
        }
    </style>
</head>
<body>
<ul class="father">
    <li>这是数据1</li>
    <li class="son">这是数据2</li>
    <li>这是数据3</li>
    <li>这是数据4</li>

</ul>
</body>
</html>

7、伪类选择器

给当前的标签开头结尾加数据:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div::after{
            content: '这是web后端,爬虫,数据分析';
        }
        div::before{
            content: '课程:';
            color: red;
        }
    </style>
</head>
<body>
<div>python+AI:</div>
</body>
</html>

8、新增选择器选择子类第几个

E:nth-child()
匹配类型为E然后第几个子类型
类似的还有：
E: first-child()
E: only-child()

下面是nth-child选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .list div:nth-child(3)){
            background: red;
        }
    </style>
</head>
<body>
<div class="list">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>