CSS - 样式继承 ¶

a标签不会继承颜色
把握

作者：KK
发表日期：2016.1.26

CSS里有些样式是可以被继承的,是什么意思呢?就是说如果body包住了p标签,那么body的样式在p标签里也会生效

<body>
	<style type="text/css">
	body{color:#F54;}
	</style>
	我是body的一行字
	<p>我是p的一行字</p>
</body>

你看!你看!我们只给body设置了color,可是p标签也跟body同一个文字颜色啊,没设置的不应该是默认黑色的才对吗?

所以这就是继承的效果咯,就算里面包多几层都会被继承;但并不是所有属性都可以被继承的哦,比如宽高,父标签是100100像素的话,子标签是不会依然100100的哦

a标签不会继承颜色 ¶

这里我专门拿出来讲,如果有a标签,则你给body设置了字体色后,a标签是依然显示默认的蓝色的

所以在有a标签时想给它也上颜色,上面的选择器你要这样写才行body,a{color:...}

把握 ¶

具体哪些样式会不会被继承,在运用过程中你会慢慢积累并感受得到,使用这个样式时你不由自主地根据自己的使用经验去判断它的继承效果

另外其实网上一些CSS详细教程或者CSS查询手册会告诉你哪个属性可以被子标签继承的

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });