您的位置：首页 > Web前端 > CSS

css选择器

2017-07-02 18:34 309 查看
一、id选择器

1、格式：
#id名称{属性：值}


2、注意点：html的每个标签都有id属性，同一页面的id值不能一样；id只能是字母、数字、下划线，不能以数字开头；id一般是给js使用的

二、类选择器

1、格式：
.类名{属性：值}


2、每个html标签都有class属性，在同一界面中类名可以重复

3、class命名规范和id一样

4、类名是用来给某个特定标签设置样式的

5、在html中每个标签可以同时绑定多个类名

格式：
<p class=" 类名1 类名2">测试</p>


小练习：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style type="text/css">
.colorR{
color: red;
}
.font30{
font-style: 30;
}
.line{
text-decoration: underline;
}
</style>
</head>

<body>
<p class="colorR font30 line">哈哈哈</p>
<p class="colorR font30 line">哈哈哈3</p>
<p class="colorR font30">哈哈哈5</p>
<p class="colorR font30">哈哈哈8</p>
</body>
</html>


三、后代选择器

1、作用：找到指定标签的所有后代标签，设置属性

2、格式：标签名称1 标签名称2{属性：值} 先找到标签1，再在标签 1下面去找标签2，然后设置属性

3、注意点：后代选择器必须用空格隔开，只要放在指定标签中的都是后代；后代选择器不仅可以使用标签，还可以使用id、class等其它选择器

四、子元素选择器

1、作用：找到指定标签中所有的直接子元素，然后设置属性

2、格式：标签名称1>标签名称2{属性：值} 先找到标签1，在找到标签名称1下面的直接子元素标签名称2

3、子元素选择器之后查找儿子，不会查找其它被嵌入的标签；子元素选择器之间只能用>连接，不能用空格；子元素选择器不仅可以使用标签，还可以使用id、class等其它选择器

例如：

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
div>p{
color: red;
}
</style>
</head>

<body>
<p>123</p>
<div>
<p>123456</p>
<p>1234567</p>
<ul>
<li>
<p>oooo</p>
</li>
</ul>
</div>
<p>999</p>
</body>
</html>


五、交集选择器

1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性

2、格式：选择器1选择器2{属性：值}

3、注意点：选择器和选择器之间没有任何连接符号;用得少

例如：

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
p.para1{
color: red;
}
p#id1{
color: blue;
}
</style>
</head>

<body>
<p class="para1">嘿嘿1</p>
<p class="para1">嘿嘿2</p>
<p id="id1">嘿嘿3</p>
<p>嘿嘿4</p>
</body>


六、并集选择器

1、作用：给所有选择器选中的标签设置属性

2、格式：选择器1，选择器2{属性：值}

3、注意点：选择器与选择器之间用逗号隔开

例如：

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
.para1,.para2{
color: red;
}
</style>
</head>

<body>
<p class="para1">嘿嘿1</p>
<p class="para2">嘿嘿2</p>
<p id="id1">嘿嘿3</p>
<p>嘿嘿4</p>
</body>


七、兄弟选择器

1、相邻的兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式：选择器1+选择器2{属性：值}

注意点：相邻兄弟选择器只能选中紧跟其后的标签

例如：ooo和咿呀1变红

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
h1+p{
color: red;
}
</style>
</head>

<body>
<h1>哈哈</h1>
<p>ooo</p>
<p>eee</p>
<p>kkk</p>
<h1>嘿嘿</h1>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</body>


2、通用选择器：给指定选择器后面的所有选择器中的所有标签设置属性

格式：选择器1~选择器2{属性：值}

例如：

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
h1~p{
color: red;
}
</style>
</head>

<body>
<h1>哈哈</h1>
<a href="#">超链接</a>
<p>ooo</p>
<p>eee</p>
<p>kkk</p>
<h1>嘿嘿</h1>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</body>


八、序选择器

1、同级别的第几个

first-child:同级别的第一个标签

last-child:同级别的最后一个标签

nth-child(n):同级别的第n个标签

nth-of-type(n):同级别的倒数第n个标签

nth-child(odd):同级别的所有奇数

nth-child(even):同级别的所有偶数

nth-child(xn+y):自定义同级别的标签，n从0开始递增

only-child:选中父元素的唯一子元素

注意点：数是第几个的时候不区分类型

<head>
<meta charset="UTF-8">
<title>01-css体验</title>
<style>
p:first-child{
color: red;
}
</style>
</head>

<body>
<p>开始1</p>
<p>开始2</p>
<p>开始3</p>
<div>
<p>咿呀1</p>
<p>咿呀2</p>
<p>咿呀3</p>
</div>
<p>结束</p>
</body>


2、同类别的第几个

first-of-type:同级别同类型的第一个

last-of-type:同级别同类型的最后一个

nth-of-type(n):同级别同类型的第n个

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

nth-of-type(odd):同级别同类型的所有奇数

nth-of-type(even):同级别同类型的所有偶数

only-of-type:选中父元素的唯一类型的某个标签

p:first-of-type{
color: blue;
}


九、属性选择器

1、格式1：[attribute] 根据指定的名称找到对应的标签设置属性

p[id]{
color: red;
}


2、格式2：[attribute:value] 找到指定属性，并且该属性的值为value的标签，然后赋值;最常见的应用场景就是用于区分input属性

p[class=cc]{
color: blue;
}


3、属性的取值是以什么开头的

[attribute|=value] css2

[attribute^=value] css3

css2中的只能找到value开头并且value是被-和其它内容隔开的

css3中的只要是value开头的都能找到

img[alt^=a]{
color: red;
}


4、属性的取值是以什么结尾的

[attribute$=value] css3

5、属性的取值是否包含某个特定的值

[attribute~=value] css2

[attribute*=value] css3
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航