CSS基础(三)选择器

1.关于选择器的理解

选择器,就是选择一个集合里面的元素,因为CSS的作用就是定义某个内容的样式,如果一个一个内容去定义,那就太麻烦了,提高效率的办法就是让一些样式的内容作为一个集合,给这个集合定义相同的样式

2.选择器的简单分类介绍

2.1单一的选择器

选择器分为很多种,首先是一些基本的选择器,用来统一地定义某种元素,或者某类,拥有某种属性的内容或者某个id的内容的样式

名称举例影响的范围
通配符选择器*{样式}所有元素的样式
元素选择器h1{样式}所有被<h1>包裹的内容
类选择器.top{样式}属性class=“top”的所有控件
id选择其#age{样式}属性id = “age”的元素
属性选择器h1[name]{样式}所有有name属性的h1的内容

还有一个比较特殊的用法,叫做选择器分组,意思是,上面的几种选择器如果样式都一样,可以用逗号隔开,放在一起作为一个组,就不用写那么多次了,比如:

h1,h2,h3{
	color:red;
}

它等价于:

h1{
	color:red;
}
h2{
	color:red;
}
h3{
	color:red;
}

下面对单一的选择器进行详细的介绍:

2.1.1.元素选择器

元素就是那种在html文件中带着尖括号的,比如<h1>,<h2>,<p>,<div>之类的,那么在css中定义的时候,没有前缀,直接写名字就完了,比如

body {
    background-color: white;
}
table{
	color:red;
}

2.1.2.类选择器

在html文件中,class=xxx的内容,在css文件中,在类名前面加一个点号就可以定义其样式了。比如想定义以下htm文件中类为“important”的这段内容

<p class="important">
This paragraph is a very important warning.
</p>

在css中可以这样写

.class {
	color:red;
}

2.1.3. id选择器

html文件中,id=xxx的内容,在css中可以用#xxx来定义它们的样式,比如

#navigation {
	color:red;
}

可以定义id为navigation的内容的样式
跟其他选择器不一样,在一个文件中,id选择器是一对一的,而且是唯一存在的,不允许有两个元素是同一个id,也不允许一个元素拥有两个id,而且它是大小写区分的

2.1.4. 属性选择器

属性选择器可以作用于拥有某个属性的元素,或者拥有某个属性且这个属性符合某种条件的元素,因为属性值可以有很多,很长一串,所一会涉及到匹配的问题,比如

语法指定的内容
元素[ABC]{样式}属性名为ABC的元素
元素[ABC=“abc”]{样式}属性名为ABC,且属性值完全等于abc的元素
元素[ABC~=“abc”]{样式}属性名为ABC,且属性值包含“abc”的元素
元素[ABC^=“abc”]{样式}属性名为ABC,且属性值以abc开头的元素
元素[ABC$=“abc”]{样式}属性名为ABC,且属性值以abc结尾的元素
元素[ABC*=“abc”]{样式}属性名为ABC,且属性值能正则匹配上“abc”的元素
元素[ABC=“abc”]{样式}

比如:

p[lang|="phone"]{
	color = "red";
}

这个规则匹配以"phone"开头或者以"phone-"开头的元素
注意当属性名为class的时候,可以直接用点,不用中括号也可以,也就是说,p.important 和 p[class=“important”] 是等价的。

2.2 复合的元素选择器

有了以上的选择器就很容易统一地定义一种元素的样式,但也有个问题,如果想在这些普通里面搞一点特别,就会有些棘手,接下来的选择器就为这样的操作提供了更多的可能,它们主要是通过嵌套或者突出来实现的

名称举例影响的范围
后代选择器section(空格) .title{样式}section块内的class=“title”的内容,可以是在里面很多层(孙子)
子元素选择器section >.div{样式}section块内的div子块的内容,只能是儿子不能是孙子
多类选择器.section.title选择同时是section和title类的元素
相邻兄弟选择器h1+p{样式}在h1元素后面出现的所有<p>元素,前提是h1和p都是同一个父亲里面的
伪类a:hover{样式}当鼠标停留在链接上时的样式
伪元素p::firstline{样式}段落中的第一行

下面将详细介绍符合的选择器

2.2.1.后代选择器

元素名和后代元素名之间用空格分离,比如section块里面的title类的元素:

section .title{

}

2.2.2.子元素选择器

Father>Son 中间空格可以随便写多少个都行,这个选择器和后代选择器的区别是,前者可以嵌套很多环,但是这里是直接的嵌套,也就是说不能是孙子,只能是儿子
举例:

table.company td>p

这个代表table标签里面,class属性为company的元素,它的后代中如果有td这个标签,且td中有个儿子p元素,那么这个p元素就被选择了

2.2.3.多类选择器

有些元素可以同时是a,b两类的,把它们写在一起,不加空格就可以表示显示同时是这两个类的元素,比如:一个特定的元素同时标记为重要(important)和警告(warning)

<p class="important warning">
This paragraph is a very important warning.
</p>

class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素会另外有一个银色的背景 。就可以写作:

 .important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

匹配的原则是按最长的匹配,比如

<p class="important warning urgent">
This paragraph is a very important warning.
</p>

2.2.4.相邻兄弟选择器

用加号连接的,用于定义这个加号后面的元素的样式,比如下面的代码定义选择紧接在 h1 元素后出现的段落,其中h1 和 p 元素拥有共同的父元素

h1 + p {margin-top:50px;}

再比如下面的代码选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

html > body table + ul {margin-top:20px;}

2.2.5.伪类选择器

用冒号来连接选择器以及选择器的状态,向某些选择器添加特殊状态的特殊效果
语法:选择器 : 伪类 {样式}
例如:

a:visited{color:red}--已经访问过的链接样式
a:link{color:blue}--未访问过的链接样式
a:hover{color:yellow}--当鼠标停留在链接上方样式
a:active{color:pink} --当鼠标点击链接的样式

这里的伪类于css的类可以配合使用,比如a.red可以作为选择器,选择class为red的a标签的样式

2.2.6. 伪元素

作用:向某些选择器设置特殊效果
语法:选择器:伪元素{样式}
比如

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

多重设置

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }
h1:before
  {
  content:url(logo.gif);
  }
h1:after
{
content:url(logo.gif);
}

伪类与伪元素的区别?

3.选择器和优先级

关于选择器的组合和优先级的问题,选择器是由很多种的,针对于不同的元素或者对象去定义,这就涉及到了优先级的问题,某一个控件同时是某个类,也拥有某个id,属于某种元素,这个时候应该怎么各种选择器的优先级,我总结到的规律是:越少的就约高级,比如id比class少,那么id比class更优先,class比元素少,那么class更加优先
这里总结一下:

普通选择器优先级
id3
class2
元素1

关于复合的选择器

内嵌元素优先级(越高越优先)
子元素2
后代元素1
3

比如:

<div class="show">
    <h1 id="new" class="new">title</div>
</div>

A .show .new{color:red;}
B.#new{color:blue;}
C .show>h1{color:pink;}
D .new{color:yellow;}

这几个标签的优先级是:
B(id) > D(类) > C(子代) > A(后代)
特殊情况:有”!important“标签标明的是最重要的

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页