CSS基础之选择器

一：CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到，一个样式表时，就会按照。

二：CSS语法

每个CSS有两部分组成：选择器和声明，声明又包括属性和属性值。每个声明由分号结束。

三：CSS的几种引入方式

3.1：行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

 <p style="color: red">Hello world.</p> 

3.2：内部样式

嵌入式是将CSS样式几种写在HTML的<head>标签之中，具体方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <base target="_blank">
    <style type="text/css">

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a{
            display: :block;
            width: 60px;
        }
        a:link{color: pink;}
        a:visited{color: #2B6600}
        a:hover{color: blue; font-size: 150%;}
        a:active{color: #222222}
        
    </style>
</head>
<body>
<ul>
    <li><a href="#home">home</a></li>
    <li><a href="#news">news</a></li>
    <li><a href="#about">about</a></li>
    <li><a href="shopping">shopping</a></li>
</ul>

</body>
</html>
View Code

3.3：外部样式

外部样式就是把CSS文件写在单独的文件里面，将HTML文件和CSS样式表完全解耦和，提高开发效率，具体引入方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/mystyle.css">
</head>
<body >

</body>
</html>

四：CSS选择器

4.1：基本选择器

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        #p1 {
            color: red;
        }
    </style>
</head>
<body>
    <p id = 'p1'>hello world</p>

</body>
</html>
View Code

类选择器（标签的类属性可以有多个，多个属性需要以空格分开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-weight: bold;
        }

    </style>
</head>
<body>
    <p class = 'p1 p2'>hello world</p>
</body>
</html>
View Code

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        p {
            color: pink;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>
View Code

通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        * {
            color: pink;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>yes command</p>
    <p>one world one dream</p>
</body>
</html>
View Code

4.2：组合选择器

4.2.1：后代选择器

/*
选中标签li下的所有标签a，将其文本设置成pink颜色
*/
li a {
    color: pink;
}

4.2.2：儿子选择器

/*
选择标签div的子标签p,(注意：仅仅是子标签，其子子p标签，和后面的都不选中）
*/
div>p {
    color: red;
}

4.3.3：毗邻选择器

/*
毗邻选择器必须通过+号链接,毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
*/
div+p {
    font-weight: bold;
}

4.3.4：弟弟选择器

/*
用~来链接,选择器选中的是指选择器后面的某个选择器选中的所有标签,无论有没有被隔开，都可以被选中
*/
ul~p {
    color: yellow;
}
注：选中ul标签后所有的同级的p标签，无论p标签有没有隔开

4.3：属性选择器

/*
用于选取带有属性的元素
*/
p [title] {
    color: red;
}
/*
可以用去选取带有指定属性的属性值的元素
*/
p[class = 'part1']

4.4：CSS3中的序列选择器

:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个

:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个

:only-of-type                    同类型的唯一一个
:only-child                         同级别的唯一一个

4.5：伪类选择器（附具体使用场景）

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

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

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

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

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}
注：
1 a标签的伪类选择器可以单独出现，也可以一起出现
2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
    link，visited，hover，active
3 hover是所有其他标签都可以使用的
4 focus只给input标签使用

伪类选择器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <base target="_blank">
    <style type="text/css">
        a:link{color: pink;}
        a:visited{color: #2B6600}
        a:hover{color: blue; font-size: 150%;}
        a:active{color: #222222}
    </style>

</head>
<body>
<a href="#">home1</a><br>
<a href="#">home2</a><br>
<a href="#">home3</a>
</body>
</html>
View Code

4.6：伪元素选择器

/*
选取标签p首字母设置
*/
p:first-letter {
  font-size: 48px;
  color: red;
}

/*
在每个<p>标签之前插入？
 */
p:before {
  content:"？";
  color:red;
}

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

 

回到目录

posted @ 2018-05-28 17:54  Leslie-x  阅读(145)  评论(0)  编辑  收藏  举报