css学习之路(2)--css选择器

时间:2022-02-11 09:03:02

html代码

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="test1">test1</div>
<div class="test2 clear">test2</div>
<div>test3</div>
<div data-id="12">test4</div>
</body>
</html>

一、基本选择器:

1.元素选择器

div{color:red;backgroud-color:blue;}//选择div元素


2.ID选择器

div#test1{color:red;backgroud-color:blue;}//选择id为test1的div元素


3.类选择器

div.test2{color:red;}//选择类为test2的div元素

4.属性选择器(类似类选择器)

div[data-id]{color:#0000FF;}//选择包含属性data-id的div元素


5.后代选择器

body div.test2{color:#0000FF;}//选择body后代中,类为test2的div元素

二、特殊选择器

1.分组选择器(对该分组运用相同的css,各个选择器用','隔开)

body,div.test2{font-size:12px;}//选择body和类为test2的div元素

2.通配符选择器(对所有元素运用相同css)

*.test1{color:blue;}//对所有类为test1的元素运用css

3.多个类选择器

.test2.clear{border:1px solid #FF0000;}//选择类为test2 并且类为clear的元素

4.具体属性值选择器

div[data-id="12"]{color:#00FF00;}//选择包含属性data-id并且data-id="12"的div元素

5.部分属性值选择器

div[class ~="clear"]{color:#00FF00;}//选择包含属性class,并且class值中包含clear的div元素

6.子元素选择器

body > div#test1{color:#00FF00;}//选择body子元素(直接后代)中的id为test1的div元素

7.相邻兄弟元素选择器

div#test1 + div.test2{margin-top:0;}//选择 id为test1的div元素 的相邻元素中的 类为test2的div元素

三、伪类和伪元素

1.伪类(参见:http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000}

2.伪元素(参见: http://www.w3school.com.cn/css/css_pseudo_elements.asp

div:after{content:"test";color:red;}

3.伪类与伪元素的区别(参见: http://segmentfault.com/blog/stephenlee/1190000000484493

  • CSS 伪类用于向某些选择器添加特殊的效果。
  • CSS 伪元素用于将特殊的效果添加到某些选择器。