CSS3选择器

最新推荐文章于 2024-08-25 01:17:37 发布

fanxl12

最新推荐文章于 2024-08-25 01:17:37 发布

阅读量507

点赞数

分类专栏： CSS3 文章标签： css3 css3样式选择器

本文链接：https://blog.csdn.net/fanxl10/article/details/45689421

版权

1 篇文章 0 订阅

订阅专栏

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

我们在<head></head>中添加<style></style>来添加css样式，或者<link href="..css" rel="stylesheet">引用外部定义的css样式。那么css3中定义样式的选择器有哪些呢？

定义全局样式*{}

*{
	font-size:40px;
	color:#9C3;
}

这样，所有元素如果没有指定css样式，就会用上上面定义的样式；

定义全局非元素的样式body{}

body{
	font-size:30px;
	color:#C03;
}

class样式 .class名称比如. divStyle{}

.divStyle{
background-color:#9CC;
font-size:20px;
}

引用<div class="divStyle">div样式</div>

id样式 #id名称比如 #divIdStyle{} 引用<div id="divIdStyle">div样式</div>

id选择器也是可以进行组合其他选择器比如

#content h1{} 就是id为content下面的所有h1样式

 #content .item li a img {
            width: 230px;
            height: 230px;
            border: none;
        }

上面的样式定义是id为content下面class是item下面的li元素下面的a元素下面的img样式

id选择器和class选择器区别，id必须是唯一的，class可以是有多个

元素选择器元素名称{} 比如 p元素样式 p{} a元素样式 a{}，那么页面上所有的p和a元素都会应用这个样式

元素选择器也可以和class选择器进行组合使用，比如a.current{} 就是a标签并且class是current的样式

另外div,p{} 所有div和p元素应用同一个样式

div p{} 选择<div> 元素内部的所有 <p> 元素

div>p{}选择父元素为 <div> 元素的所有 <p> 元素

div+p{} 选择紧接在 <div> 元素之后的所有 <p> 元素

属性选择器 [属性名]{} 比如 <h1></h1>标签里面有属性title那么我们可以这样定义样式

[title]{
	font-size:16px;
	color:#6C0;
}

引用：<h1 title="">这个是H1的样式</h1>
另外还可以[属性名="属性值"]{} 来实现更加精确的匹配比如

[title="h2title"]{
font-size:20px;
color:red;
}

引用<h2 title="h2title">这个是H1的样式</h2>

注意：如果定义了*{}，那么会先匹配*{}里面的样式，再匹配其他样式

还有一些其他选择器，比如鼠标指针位于其上的链接的样式选择器：a:hover{}等等

具体大家可以参考w3school上面关于css的说明:http://www.w3school.com.cn/cssref/css_selectors.asp

关注

专栏目录