CSS复合选择器

目录

一、CSS复合选择器

（1）交集选择器

（2）并集选择器 (群组选择器)

 （3）兄弟选择器

（4）后代选择器

（5）子元素选择器

测试题

（6）属性选择器

（7）伪元素选择器（CSS3新增）

E::first-letter  块级文本的第一个单词或字（用于中日韩CJK）

E::first-line  块级文本的第一行

E::selection 可改变选中文本的样式 （行内文本也可以）

E::before和E::after 

一、CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

（1）交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，如h1.red。

记忆技巧：交集选择器是并且的意思，即...又...的意思

注意点：

1、选择器之间没有任何的连接符号
2、选择器可以是class， 也可以是id，也可以是伪类选择器，还可以是标签，但标签要放在前面

比如： p.one 表示选择类名既是.one 且是段落标签。

<p class="red">段落1</p>
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>
<style type="text/css">
	p.red {
		color: red;
	}
	p#pink {
		color: pink;
	}
	.red#pink {
		color: blue;
	}
</style>

（2）并集选择器 (群组选择器)

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器。

记忆技巧：

并集选择器表示 和 的意思，只要使用逗号分隔，所有选择器都会执行后面的样式。

比如： p.on#ide, .one, p, #id {color:red;} 表示.one  p  #id这3个选择器都会执行同一个样式，通常用于集体声明。

示例：

<div>这是一个div</div>
<p>段落</p>
<h1>孙悟空</h1>
<h1 class="pig">猪八戒</h1>
<h2>沙悟净</h2>
<h2 id="sanzang">唐三藏</h2>
<style type="text/css">
	div, 
	p,
	.pig,
	#sanzang {
		color: red;
	}			
</style>

 （3）兄弟选择器

兄弟选择器是CSS3.0新增的一个选择器，语法格式： A~B 或者 A+B

  • ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

  • ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

示例：

<head>
    <style>
        /*  22和33和44被选中   因为每一个div都可以作为第一个div  */
        div+div {
            color:aqua;
        }
        /* 33被选中  */
        .base+div{
            color:yellowgreen;
        } 
    </style>
</head>
<body>
    <div>1111</div>
    <div class="base">22</div>
    <div>33</div>
    <div>44</div>
    <p>555</p>
    <p>666</p>
    <p>777</p>
</body>

<head>
    <style>
        /*111被选中*/
        div+p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>222我是一个段落</p>
    </div>
    <p>111我是相邻的兄弟</p>
    <p>我是一个段落</p>
</body>


<head>
   <style>
        div~p{
            color: red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

（4）后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

示例：

<p>王者荣耀</p>

<div>
	<p>王源</p>
</div>

<div class="wangjianlin">
	<p>王思聪</p>
</div>

<div id="wang">
	<p>王宝强</p>
</div>
<style type="text/css">
    /*  这个会选中上面所有的p */
	div p {
		color: red;
	}

	.wangjianlin p {
		color: green;
	}
	#wang p{
		color: blue;
	}
</style>

（5）子元素选择器

子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,

注意：这里的子元素表示亲儿子，不包含孙子、重孙子之类。

示例：

<ul class="nav">
	<li>一级菜单
		<ul> 
			<li>
                <span>
                    222
                	<span>111</span>
                </span>
            </li>
			<li>二级菜单</li>
			<li>二级菜单</li>
		</ul>
	</li>
</ul>
<style type="text/css">
	.nav li { /*后代选择器*/
		color: blue;
	}
	.nav > li { /*子元素选择器*/
		color: red;
	}
</style>

/*子级元素选择器会覆盖后代选择器，但是只覆盖了一级菜单（.nav的儿子）*/

        .div1>.div3 {
            color:red;

        }

   <div class="div1">
        <div class="div2">
            <div class="div3">孙子</div>
        </div>
        <div class="div3">儿子</div>
    </div>

儿子会被选中

测试题

	<div class="nav">	<!--主导航栏-->
	<ul>
		<li><a href="#">公司首页</a></li>
		<li><a href="#">公司简介</a></li>
		<li><a href="#">公司产品</a></li>
		<li>
			<a href="#">联系我们</a>
			<ul>
				<li><a href="#">公司邮箱</a></li>
				<li><a href="#">公司电话</a></li>
			</ul>
		</li>
	</ul>
</div>

<div class="sitenav">	<!--侧导航栏-->
	<div class="site-l">左侧导航栏</div>
	<div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

1、链接登录的颜色为红色，同时主导航栏里面所有的链接改为蓝色。

2、主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

3、主导航栏里面的一级菜单链接文字颜色为绿色。

  .site-r>a {
            color:red;
        }
        .nav a {
            color:blue;
        }
        .nav,.sitenav {
            font-size: 14px;
            font-family: "微软雅黑";
        }
        .nav>ul>li>a {
            color:green;
        }

（6）属性选择器

表示选取标签带有某些特殊属性的选择器。开发中一般用于form标签中的input标签。

选择器含义
[attr]存在attr属性即可
[attr=val]属性值完全等于val
[attr*=val]属性值里包含val字符并且在“任意”位置
[attr^=val]属性值里包含val字符并且在“开始”位置
[attr$=val]属性值里包含val字符并且在“结束”位置

示例1：

<a href="#" title="aa3ddd" class="ww" id="w">百度</a>   
<a href="#" title="bb">新浪</a>
<a href="#">搜狐</a>
<a href="#">小米</a>
<a href="#">京东</a>
a[title] {
	color: red;
}
.ww[title]
#w[title]
/*表示存在title属性的a标签都使用该样式*/

显示结果：

示例2：

<input type="text" value="输入"><br />
<input type="text" value="输入"><br />
<input type="text" value="输入"><br />
<input type="submit"><br />
<input type="reset"><br />
<input type="button" value="按钮"><br />
input[type="text"] {
	color: red;
}
/*表示只有type属性值为text的input标签才能使用该样式*/

显示结果：

 示例3：

<div class="font14">这是一个div</div>
<div class="font24">这是一个div</div>
<div class="textfont">这是一个div</div>
div[class^="font"] {
	color: red;
}
/*表示class属性的值以font开头的标签才能使用该样式*/

显示结果：

示例4：多个属性嵌套

        input[name^="text"][id] {
            background-color:red;
           
        }
    <body>
        <input type="text" name="text111" id="">
        <input type="password" name="222text" id="">
        <input type="text" name="22text44" id="">
        <a href="" title>xixiix</a>
    </body>

第一个text111会被选中

（7）伪元素选择器（CSS3新增）

  1. E::first-letter  块级文本的第一个单词或字（用于中日韩CJK）

  2. E::first-line  块级文本的第一行

  3. E::selection 可改变选中文本的样式 （行内文本也可以）

注意：“.”一个点是类选择器， “：”一个冒号是伪类选择器， “::”两个冒号是伪元素选择器。

示例：

<h2>锦上添花</h2>
<p>锦上添花，读音：jǐn shàng tiān huā ，汉语成语。释义：意指在美丽的锦织物上再添加鲜花。比喻略加修饰使美者更美，引申比喻在原有成就的基础上进一步完善。 出处： 宋 黄庭坚 《了了庵颂》：“又要 涪翁 作颂，且图锦上添花。” 此外， 清 李渔 《凰求凤·让封》：“三位夫人恭喜贺喜，又做了状元的夫人，又进了簇新的房子，又释了往常的嫌隙，真个是锦上添花。” 毛泽东 《在延安文艺座谈会上的讲话》二：“对于他们，第一步需要还不是‘锦上添花’，而是‘雪中送炭’。所以在目前条件下，普及工作的任务更为迫切。”
</p>

p::first-letter {
	color: red;
  	font-size: 50px;
}
p::first-line {
	color: green;
}
p::selection {
	color: blue;
}

        4.E::before和E::after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。（经常会使用）

注意：before与after表示在盒子内部的前端和后端插入内容。

示例：

div::before {
	content: "我";
}
div::after {
	content: "18岁";
}

<div>今年</div>
/*单双引号都可以*/

显示结果是： 我今年18岁

::-webkit-input-placeholder表示选择到input中的placeholder，为其设置样式

如果就写input {color:red;}是不会设置成功的

    <input type="text" placeholder="请输入">

        ::-webkit-input-placeholder{
            color:red;
        }