css选择器(基础)

时间:2022-02-03 03:57:27

CSS选择器:

    一个样式的语法是由选择器+属性+属性值三部分组成;

到底什么是选择器呢?

答:个人直白的理解为:选择一种要对它进行操作的标签的方法就叫做选择器。也就是说选择器就是一种选择元素的方式。

1,元素选择器

<!DOCTYPE html>

<html>

<head>

<title>选择器</title>

<style type ="text/css">

div{

collor:red;

}

</style>

</head>

<body>

<p>长风破浪会有时,直挂云帆济沧海</p>

<div>会当凌绝顶,一览众山小</div>

<span>天生我材必有用,千金散尽还复来</span>

</body>

</html>

    2,id选择器  <!--同一页面不能出现两个相同的id-->

<!DOCTYPE html>

<html>

<head>

<title>选择器</title>

<style type ="text/css">

#neo{

collor:red;

}

</style>

</head>

<body>

<p>长风破浪会有时,直挂云帆济沧海</p>

<div id="neo">会当凌绝顶,一览众山小</div>

<span>天生我材必有用,千金散尽还复来</span>

<div>数风流人物,还看今朝</div>

</body>

</html>

  3,class选择器   <!--同一页面可以出现两个相同的class-->

<!DOCTYPE html>

<html>

<head>

<title>选择器</title>

<style type ="text/css">

.neo{

collor:red;

}

</style>

</head>

<body>

<p class="neo">长风破浪会有时,直挂云帆济沧海</p>

<div class="neo">会当凌绝顶,一览众山小</div>

<span>天生我材必有用,千金散尽还复来</span>

<div>数风流人物,还看今朝</div>

</body>

</html>

4,子元素选择器

<!DOCTYPE html>

<html>

<head>

<title>选择器</title>

<style type ="text/css">

#neo #number1{

collor:red;

}       <!--表示选择“id为neo的父元素”下的number1子元素的内容-->

#neo2{

color:blue

}       <!--表示选择“id为neo2的父元素所有内容-->

</style>

</head>

<body>

<div id="neo">

<p id="number1">长风破浪会有时,直挂云帆济沧海</p>

<p id="number2">会当凌绝顶,一览众山小</p>

</div>

<div id="neo2">

<p id="subject1">长风破浪会有时,直挂云帆济沧海</p>

<p id="subject2">会当凌绝顶,一览众山小</p>

</div>

</body>

</html>

   5,群组选择器

<!DOCTYPE html>

<html>

<head>

<title>选择器</title>

<style type ="text/css">

#number1,#number2,#subject1,#subject2{color:#eee;font-szie:18px;}

</style>

</head>

<body>

<div id="neo">

<p id="number1">长风破浪会有时,直挂云帆济沧海</p>

<p id="number2">会当凌绝顶,一览众山小</p>

</div>

<div id="neo2">

<p id="subject1">长风破浪会有时,直挂云帆济沧海</p>

<p id="subject2">会当凌绝顶,一览众山小</p>

</div>

</body>

</html>

 6,伪类选择器

1,:after与content属性一起连用,用于定义在对象后面的内容

  语法:选择符::after{content:"文字";}

        选择符::after{content:url(图片路径);}

  2,:before与content属性一起连用,用于定义在对象后面的内容

  语法:选择符::before{content:"文字";}

       选择符::before{content:url(图片路径);}

3,:first-letter:定义对象内第一个字符的样式。

   说明:*(该伪元素只能用于块级元素。)

 4,:first-line:定义对象内第一行的样式。

  说明:*(该伪元素只能用于块级元素。)

!!!ie6以下版本浏览器不支持伪对象选择器

10:53:17   2017-11-05

以上就是几种常见的选择器,也是css必须掌握的要点,希望大家勤加练习,共同进步!