CSS学习笔记-【属性、元素、层级选测器和伪类】AND 2018-11-22（22:15）

最新推荐文章于 2024-08-26 14:25:48 发布

原创最新推荐文章于 2024-08-26 14:25:48 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

灰烬CSS学习笔记专栏收录该内容

5 篇文章

订阅专栏

一、属性和元素选择器
1.属性选择器：
在标签后加入需要使用样式的type及属性
例如：

<style type="text/css">             
   	 input[type="text"]{
        background: purple;
        border: solid aquamarine;
    }
</style>

2.元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器
例如:

<style type="text/css">             
   	 div{
        width: 500px;/*横向长度*/
        height: 300px;/*竖向长度*/
        color: fuchsia;
        border: solid navajowhite;
    }
</style>

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性和元素选择器</title>
<style type="text/css">
    /*元素选择器
    这是最常见的选择器，简单说，文档中的元素就是选择器*/
    div{
        width: 500px;/*横向长度*/
        height: 300px;/*竖向长度*/
        color: fuchsia;
        border: solid navajowhite;
    }
        /*属性选择器
        在标签后加入需要使用样式的type及属性。
        */
    input[type="text"]{
        background: purple;
        border: solid aquamarine;
    }
</style>
</head>
<body>
<div>老张</div>
<div>老宋</div>
<div>老李</div>
<span>老王</span>
<br/>
<input type="text" placeholder="请输入用户名"><br/>
<input type="password" placeholder="请输入密码"><br/>
<input type="text" placeholder="请输入地址">
</body>
</html>

二、层级选择器
它会一层一层的筛选。
是类、ID、元素选择器的结合。
例如：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
    /*p{
            border: 1px solid red;
        }*/
    /*层级选择器：
    它会一层一层的筛选
    是类、ID、元素选择器的结合。
    */
       div div p{
            border: 1px solid green;
        }
    div div #p3{
        border: 1px solid purple;
    }
    div div .class4{
        border: 1px solid red;
    }
</style>
</head>
<body>
<div>
  <div>
    <p >段落1</p>
    <span>span标签</span>
  </div>
</div>
<div>
    <p>段落2</p>
    <span>span标签</span>
</div>
<div>
		 <div>
 		   <p id="p3">段落3</p>
 		   <span>span标签</span>
		 </div>
</div>
<div>
  <div>
  	  <p class="class4">段落4</p>
 	   <span>span标签</span>
  </div>
</div>
</body>
</html>

三、伪类
a:link{color: 颜色;}/未访问时的颜色/
a:visited{color: 颜色}/访问过后的颜色/
a:hover{color: 颜色}/鼠标移动到链接按钮上时的颜色/
a:active{color: 颜色}/选定链接时的颜色/

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
    a:link{color: black;}/*未访问时的颜色*/
    a:visited{color: aquamarine}/*访问过后的颜色*/
    a:hover{color: yellow}/*鼠标移动到链接按钮上时的颜色*/
    a:active{color: purple}/*选定链接时的颜色*/
</style>
</head>
<body>

<a href="https://www.baidu.com">百度</a>
<a href="https://www.taobao.com">淘宝</a>
<a href="https://www.jd.com">京东</a>
<a href="http://www.twgdh.com">天王盖地虎</a>
</body>
</html>

今天就到这吧，又累啊今天，不过我相信付出总会有回报的！打卡第八天，我爱学习，生活不爱我。emmmmm…